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

时间:2016-11-04 09:52:22

标签: angular

我有一个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.例外。

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

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

2 个答案:

答案 0 :(得分:3)

这是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

答案 1 :(得分:2)

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

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