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

Question

实时示例：https ://angular-txvcna.stackblitz.io/ （代码）。

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

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

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

标签： angulartypescriptangular-lifecycle-hooks

Answer 1

我有几个想法：

1. 您可以将消息输入更改为设置器，以便在输入消息时设置消息的私有版本并处理组件内的滚动。（在我个人看来，这是最好的解决方案，因为在使用该组件的每个地方都不必重复如何滚动到底部的逻辑）

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

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