Angular2でDOMを編集するライフサイクルフック

Question

私は非常に基本的なangular2 Webアプリケーションを持っています。 DOMを編集するコードを追加できる適切な場所/フックを知りたい。

私はngAfterViewInitに置くしようとしたとき、私は次のエラー

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. 

に私はそれがとても

setTimeout(_ => { 
    .... code comes here ... 
}) 

のようなタイムアウトに私のコードをラップするためにそれを動作させるために見つけた唯一の方法を参照してください

これは正しい方法ではありません。何かご意見は？

コンポーネントのJSコード

export class LandingPageComponent implements OnInit { 

    techImageSize = "100" 

    constructor() { } 

    ngOnInit() { 
    } 

    ngAfterViewInit(){ 
    setTimeout(_ => { 
     var w = $("[data-container=tech-images]").width(); 
     this.techImageSize = Math.floor(w/4) + ""; 
    }) 
    } 

} 

関連テンプレートコード：

<div class="col-md-5" data-container="tech-images"> 
    <div class="" style='overflow: auto'> 
    <tech-image image='heroku-logo.png' [size]="techImageSize"></tech-image> 
    <tech-image image='surge-logo.svg' [size]="techImageSize"></tech-image> 
    <tech-image image='swift-logo.png' [size]="techImageSize"></tech-image> 
    <tech-image image='heroku-logo.png' [size]="techImageSize"></tech-image> 
    </div> 
</div> 

Answer 1

これは正常な動作です。私はあなたがコンポーネントテンプレートでtechImageSizeを使用していると仮定します。ライフサイクルフックは、DOMがチェックされた後にトリガされます。そして、あなたは

this.techImageSize = Math.floor(w/4) + ""; 

にそれを更新するので、次の検証段階で角度がtechImageSizeの値の差を検出し、エラーをスローします。

コンポーネントのテンプレートによっては、ngAfterViewInitライフサイクルフックを待つ必要があります。この場合、タイムアウトによる非同期更新を使用するのが正しい方法です。しかし、通常は、変更検出の開始とフックがトリガーされたときにDOMがレンダリングされているため、どのフックでもDOMにアクセスできます。

あなたにはより多くを読むことができます：

• Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error
• Everything you need to know about change detection in Angular
• The essential difference between Constructor and ngOnInit in Angular