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

Question

我有一个由Observable.interval()轮询和基本{{content}}插值填充的overflow-y: scroll;的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在内部的行为与我使用的直接插值不同。
然而，我不明白为什么，如果有一个方法来解决它。

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;
    }
}

我希望这对你有帮助。

,

Junus

Answer 2

我最终找到了一个不那么干净的替代解决方案，但至少它现在可以工作:

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