EventHookビューが完全に再レンダリングされた後

Question

私はAngpack2プロジェクトにwebpackを組み込み、前のシナリオですでに直面していた問題に取り掛かりようとしています。共通の問題は、ビューが完全にレンダリングされてから何らかのアクションが実行されるまで待つ必要があることです。ただし、ngAfterViewInitライフサイクルフックがあることはわかっていますが、これはビューが初めてレンダリングされたときにのみトリガされます。コンポーネント内のデータ変更のために再レンダリングされているとき、そのコンポーネントは再度呼び出されません。私のコードを見てみましょう：

ngOnInit() { 
    this.store.select('trips').subscribe(trips => { 
    // forces view to re-render 
    this.trips = trips; 

    // doesn't work because the updated DOM doesn't exist yet 
    let Packery: any = require('packery'); 
    new Packery(this.grid.nativeElement, { 
     itemSelector: '.grid-item', 
     gutter: 10 
    }); 
    }); 

    this.store.dispatch(new TripActions.LoadTrips()); 
} 

若干の変更は、新しいデータがロードされるたびに期待通りのコードの作業になります（ほとんどの時間）が、ウェブサイトを約秒間めちゃめちゃ醜いという警告が付属していますこれは解決策ではありません。しかしそれは問題を示しています。

ngOnInit() { 
    this.store.select('trips').subscribe(trips => { 
    // forces view to re-render 
    this.trips = trips; 


    setTimeout(() => {  
     // now it works (most of the time) because after 0.5s 
     // the updated DOM elements usually exist... 
     let Packery: any = require('packery'); 
     new Packery(this.grid.nativeElement, { 
     itemSelector: '.grid-item', 
     gutter: 10 
     }); 
    }, 500); 
    });  

    this.store.dispatch(new TripActions.LoadTrips()); 
} 

Answer 1

あなたが探しているものはngAfterViewChecked()です。ドキュメントの引用があります。

「Angular after after」は、コンポーネントのビューと子ビューをチェックします。 ngAfterViewInitの後に続き、 ngAfterContentChecked()と呼びます。

これは、初期化後に1回だけ呼び出されるのではなく、データが変更されたときに呼び出されるngAfterContentChecked()のたびにも呼び出されることを意味します。すべての呼び出しで、データがすでに存在するかどうかを確認して、コードで応答することができます。 1つの問題は、あなたがあなたのPackeryのことをした後でも呼び出されるかもしれないということです。なぜなら、あなたはそれを一度しか行わないようにする必要があるからです。

詳細についてはlifecycle hook pageをチェックしてください。