滚动到底部； scrollTop = scrollHeight运行太早了吗？

Question

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

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

我通过将项目推送到数组（this.messages.push(message)）并在此之后尝试滚动到底部来添加新消息。滚动操作this.chatboxBody.nativeElement.scrollTop = this.chatboxBody.nativeElement.scrollHeight;似乎在角度的生命周期挂钩之前，因为scrollHeight执行时具有较高的高度值。

此刻，我使用setTimeout对其进行了修复，但确实感觉很快捷。我该如何解决？ （理想情况下-以某种方式订阅更新子组件的钩子）

Answer 1

我有两个主意：

1. 您可以更改输入到设置器的消息，以便在输入消息时设置消息的私有版本并处理组件中的滚动。 （就我个人而言，这似乎是最好的解决方案，因为不必在每个使用此组件的位置重复滚动到底部的逻辑）

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

1. 您可以执行与上面类似的操作，但是除了处理messages组件中的滚动之外，还需要一个输出，然后由父组件来完成工作。