[解決済み] Angular 2 下へスクロールする（チャット形式）

質問

単一セルコンポーネントのセットを ng-for ループになります。

すべて揃ったのですが、適切な方法がわかりません。

現在、私は

setTimeout(() => {
  scrollToBottom();
});

しかし、画像は非同期でビューポートを押し下げるため、これは常に機能するわけではありません。

Angular 2でチャットウィンドウの一番下までスクロールする適切な方法は何ですか？

どのように解決するのですか？

私も同じ問題を抱えていました。 AfterViewChecked と @ViewChild を組み合わせたものです(Angular2 beta.3)。

コンポーネントのことです。

import {..., AfterViewChecked, ElementRef, ViewChild, OnInit} from 'angular2/core'
@Component({
    ...
})
export class ChannelComponent implements OnInit, AfterViewChecked {
    @ViewChild('scrollMe') private myScrollContainer: ElementRef;

    ngOnInit() { 
        this.scrollToBottom();
    }

    ngAfterViewChecked() {        
        this.scrollToBottom();        
    } 

    scrollToBottom(): void {
        try {
            this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
        } catch(err) { }                 
    }
}

テンプレートです。

<div #scrollMe style="overflow: scroll; height: xyz;">
    <div class="..." 
        *ngFor="..."
        ...>  
    </div>
</div>

もちろん、これはかなり基本的なことです。その AfterViewChecked はビューがチェックされるたびにトリガーされます。

このインターフェイスを実装すると、コンポーネントのビューがチェックされるたびに通知を受けることができます。

例えば、メッセージを送るための入力フィールドがある場合、このイベントはキーが押されるたびに発生します（ほんの一例です）。しかし、もしユーザーが手動でスクロールしたかどうかを保存して、その後に scrollToBottom() で問題ないでしょう。