2

实时示例:https ://angular-txvcna.stackblitz.io/ (代码)。

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

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

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

4

1 回答 1

1

我有几个想法:

  1. 您可以将消息输入更改为设置器,以便在输入消息时设置消息的私有版本并处理组件内的滚动。(在我个人看来,这是最好的解决方案,因为在使用该组件的每个地方都不必重复如何滚动到底部的逻辑)
    private _message: VivrMessage;
        @Input()
            set message(val: VivrMessage){
        if (val){
            this._message = val;
            this.handleScrolling();
        }
    }
  1. 您可以执行与上述类似的操作,但不是处理消息组件中的滚动,而是有一个输出,然后让父组件完成工作。
于 2019-05-21T11:49:46.813 回答