角度2でアクセスする前に要素が正しい幅になるのを正しく待つ方法はありますか？

Question

ボタンを同じ幅にしようとしていますが、実際にボタン2の幅にアクセスする前にすべてのレンダリングと処理を完了するのを実際に待っている問題があります。

「働く」という意味のDoCheckを試してみましたが、これは正しい幅の値を受け取ることを意味しますが、2度目の実行にすぎません。何らかの理由で二回NgDoCheck実行されるため

、できるだけ早く私はbutton.style.width = widest + 'px';ステートメントを追加すると、ボタンはすべて115pxの幅を取得しますので、二度目ngDoCheck実行すると、それは再びすべてのボタンの上に行くが、今回ますすべてのボタンは115pxに設定されているため、は最初にngDoCheckの値を設定したので、159pxの正しい値になることはありません。

この問題について正しい方法はありますか？ DoCheckを使用すると、2回実行されるため間違っているように見えます。入力値を確認していないのは、DoCheckのユースケースです。

export class ButtonGroupComponent implements DoCheck { 

    constructor(private _elementRef: ElementRef) {} 

    ngDoCheck() { 

    if (this.equalWidth) { 

     let buttons = this._elementRef.nativeElement.getElementsByTagName('button'); 
     let widest = 0; 

     for (var button of buttons) { 

     if (button.getBoundingClientRect().width > widest) { 
      widest = button.getBoundingClientRect().width; 
     } 
     } 

     for (var button of buttons) { 
     button.style.width = widest + 'px'; 
     } 
    } 
    } 
} 

Answer 1

AfterViewInitがトリックを行うようだ使用し、それは一度だけ、正しい行動と正しい値が得られ実行されます。それはAfterViewInitとngAfterViewInitためDoCheckとngDoCheckを交換するのと同じくらい簡単です：

export class ButtonGroupComponent implements AfterViewInit { 

    constructor(private _elementRef: ElementRef) {} 

    ngAfterViewInit() { 

    if (this.equalWidth) { 

     let buttons = this._elementRef.nativeElement.getElementsByTagName('button'); 
     let widest = 0; 

     for (var button of buttons) { 

     if (button.getBoundingClientRect().width > widest) { 
      widest = button.getBoundingClientRect().width; 
     } 
     } 

     for (var button of buttons) { 
     button.style.width = widest + 'px'; 
     } 
    } 
    } 
} 

希望、これは他の誰かがDOM操作を行うことができます。