angular - 滚动到底部； scrollTop = scrollHeight 运行得太早？

Question

实例:https://angular-txvcna.stackblitz.io/ (Code)。

我有一个“聊天”组件，我想让 div 在每次添加消息时滚动到底部。

我通过将项目推送到数组 (this.messages.push(message)) 添加一条新消息，然后尝试滚动到右下角。看起来滚动操作 this.chatboxBody.nativeElement.scrollTop = this.chatboxBody.nativeElement.scrollHeight; 在 angular 的生命周期钩子(Hook)之前，因为 scrollHeight 具有较旧的值执行时的高度。

目前我使用setTimeout来修复它，但它真的感觉像是一个捷径。我该如何解决？ (理想情况下 - 以某种方式订阅更新子组件的钩子(Hook))

Answer 1

我有几个想法:

1. 您可以将消息输入更改为 setter ，以便在输入消息时设置消息的私有(private)版本并处理组件内的滚动。 (就我个人而言，这似乎是最好的解决方案，因为这样就不必在使用该组件的每个地方重复如何滚动到底部的逻辑)

    private _message: VivrMessage;
        @Input()
            set message(val: VivrMessage){
        if (val){
            this._message = val;
            this.handleScrolling();
        }
    }

1. 您可以执行与上述类似的操作，但不是在消息组件中处理滚动，而是有一个输出，然后让父组件完成工作。