Angular2 自动将 div 滚动到底部 - 表达式更改异常

Question

我有一个overflow-y: scroll;由Observable.interval()轮询和基本{{content}}插值填充的 div 。
我试图让它自动滚动到底部，所以最后一行将始终可见。
我发现这个 plnkr http://plnkr.co/edit/7yz2DUttPjI5GVJkvr5h?open=app%2Fapp.component.ts看起来是最优雅的解决方案：
<div #list class="list" [scrollTop]="list.scrollHeight">
但是，当我尝试相同的方法时，我得到了一个Expression has changed after it was checked.异常。

<div class="cdiv" #cdiv [scrollTop]="cdiv.scrollHeight">{{content}}</div>

我只能假设*ngFor .. | async来自 plunker 的内部行为与我使用的直接插值不同。
但是我不明白为什么以及是否有办法解决它。

Answer 1

这是 Angular 中最优雅的解决方案：

为要滚动的 div 元素分配一个变量：

<div class="chat-messages" #container> <!-- Your content --> </div>

查看控制器中的 div 并在scrollToBottom更新容器内容时调用该方法：

export class ChatComponent {
    @ViewChild('container') container: ElementRef;

    //...

    private scrollToBottom() {
        this.container.nativeElement.scrollTop = this.container.nativeElement.scrollHeight;
    }
}

我希望，这有帮助。

最好的事物，

朱纳斯

Answer 2

我最终找到了一个不太干净的替代解决方案，但至少现在有效：

... implements AfterViewChecked
...
ngAfterViewChecked()
{
    let d = document.querySelector('.cdiv');
    if(d)
    {
      d.scrollTop = d.scrollHeight;
    }
}