ビューがAngular2で完全に更新されたときに呼び出す関数

Question

私のアプリケーションは、（スクロールして）メッセージのリストを表示します。ユーザーが新しいメッセージを追加すると、そのページはメッセージリストの一番下までスクロールする必要があります。新しいメッセージがメッセージリストに追加された直後にscrollToBottom（）を呼び出すのは正しいですか？それともタイミング問題を起こすでしょうか？ビューが既に更新されています（新しいメッセージを含む）ので、scrollHeightは正しいでしょうか？または私の質問を定式化する他の方法：モデルが変更されたときにビューが完全に更新されることを知る/確認する方法があります。

ビュー（messaging.html）：

<div class=”height: 100%; scroll: auto”> 
    <div class="message" *ngFor="#message of messages"> 
    ... 
    </div> 
</div 

コンポーネント：

import {Component, ViewChild, ElementRef} from 'angular2/core'; 
import {CORE_DIRECTIVES} from 'angular2/common'; 

@Component({ 
    selector: 'messaging', 
    templateUrl: './messaging.html', 
    styleUrls: ['./messaging.css'], 
    directives: [CORE_DIRECTIVES] 
}) 
export class Messaging { 
    private messages:Message[] = []; 

    @ViewChild('messagingscroll') private messageScroll: ElementRef; 

    constructor() { 
    } 

    sendMessage(message:string, element) { 
    let msg:Message = new Message(message); 

    // Add msg 
    this.messages.push(msg); 

    // Scroll to bottom 
    this.scrollToBottom(); 

    // Set back empty 
    element.value = ''; 
    } 

    scrollToBottom(): void { 
    this.messageScroll.nativeElement.scrollTop = this.messageScroll.nativeElement.scrollHeight; 
    } 
} 

Answer 1

あなたのビューでは、angular2のデフォルトのライフサイクルフックを呼び出すことができますよりも負荷が完全であるときに関数を呼び出すしたい場合すなわちngAfterViewinit()

詳細はこちらhttps://angular.io/docs/ts/latest/api/core/AfterViewInit-interface.html

当局者によると、あなたのコンポーネントのビューが完全に初期化されたときに通知を受けるために、このインターフェイスを実装します。

必要に応じて、ビューの変更後に毎回関数を呼び出す必要がありますので、ngAfterViewcheckedを使用できます。

このインターフェイスを実装して、コンポーネントのビューを確認するたびに通知を受け取るようにします。

）より、ここでhttps://angular.io/docs/ts/latest/api/core/AfterViewChecked-interface.html