角度ユニバーサルでレンダリングされたコンポーネントの幅を確認する

Question

要素の幅をチェックする必要がある（カルーセル）コンポーネントがあります。

ブラウザで：私はngAfterViewInitに電話し、@ViewChildハンドルから幅を取得できます。しかし、Universalによってレンダリングされるとき、その幅は0です。

これは、普遍的に生成されたdomはまだ表示されていますが、ブラウザで生成されたdom（ハンドルが指し示している）がドキュメントフラグメント内にあるか、または表示されていないからです。

ngAfterContentCheckedおよびngAfterViewCheckedは問題を解決できますが、私はそれが動作し続けることを望んでいません。

domが交換された後にライフサイクルフックが必要だと思います。

Answer 1

私はsetIntervalを使って幅のチェックを続けました。

@Component({ 
    selector: 'my-component', 
    template: `<div #child></div>` 
}) 
export class MyComponent { 
    @ViewChild('child') childEl: ElementRef; 
    constructor(Inject('isBrowser') private isBrowser){} 
    doTheThing() { 
     // do the thing you wanted to do 
    } 
    ngAfterViewInit() { 
     if(this.isBrowser){ 
      if(this.childEl.nativeElement.clientWidth > 0){ 
       this.doTheThing(); 
      } else { 
       let interval = setInterval(() => { 
        if(this.childEl.nativeElement.clientWidth > 0){ 
         this.doTheThing(); 
         clearInterval(interval); 
        } 
       }, 10); 
      } 
     } 
    } 
}