テンプレートがAngular2で完全にレンダリングされたときに使用できるメソッドはありますか？

Question

私はAngular2で遊んでいますし、次の操作を行いますしようとしています：

• は項目がDOMに読み込みが終了したら、アイテムをフォーマットする外部ライブラリへの呼び出しを行う項目
• の一覧を表示しますある意味で、例えば石積み。

私はBackbone Marionetteに精通しています。そのため、おそらくonShowメソッドを使用します。 Angular2では、次のJSメソッドを呼び出せるように、DOMが完全にレンダリングされていることを確認するために何ができますか？

コードスニペット：

@Component({ 
    selector: 'my-views', 
    templateUrl: 'app/views/views.component.html', 
    styleUrls: ['app/views/views.component.css'], 
    directives: [HeaderComponent] 
}) 

export class ViewsComponent implements OnInit { 
    ... 

    ngOnInit() { 
    this.user = new User(); 

    if (this.user.session_id) { 
     this.getList(); 
    } else { 
     this.router.navigate(['login']); 
    } 
    } 

    ngAfterViewInit() { 
    var elem = document.querySelector('.grid'); 
    var colWidth = document.querySelector('.grid-size'); 

    var msnry = new Masonry(elem, { 
     // options 
     itemSelector: '.grid-item', 
     columnWidth: colWidth, 
     percentPosition: true 
    }); 
    } 

    getList() { 
    this.getList(this.user) 
     .then(Array => { 
     this.myViews = Array; 
     }); 
    } 

} 

私はngAfterViewInitフック内のブレークポイントを入れて、それがヒットした時に、DOMはまだリストが表示されません。私は、リストが正常にレンダリングされた後、同じスニペットをコンソールで実行すると、正常に実行されたため、フック内にあるコードが機能することがわかります。

Answer 1

あなたはライフサイクルフック以下のいずれかを試すことができます。

export class demoComponent{ 
    //called fter initializing the component's views and child views 
    ngAfterViewInit(){ 
    } 
    //after every check of the component's views and child views 
    ngAfterContentInit(){ 
    } 
    //after projecting content into the component. 
    ngAfterViewChecked(){ 
    } 
} 

Answer 2

Angular2のいくつかのライフサイクルフックがあります：https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

私はあなたが使用したいするつもりだと思う：AfterViewInit