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

Question

我有一个 overflow-y: scroll; 的 div由 Observable.interval() 填充轮询和基本 {{content}}插值。
我试图让它自动滚动到底部，所以最后一行将始终可见。
我找到了这个 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.异常(exception)。

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

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

Answer 1

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

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

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

查看 Controller 中的 div 并在更新容器内容时调用 scrollToBottom 方法:

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

    //...

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

我希望这对您有所帮助。

最好的，

朱纳斯