如何在 Angular 中动态滚动 <textarea>？

Question

我正在编写一个聊天应用程序，其中新消息添加到<textarea>. 我希望textarea滚动到底部，因为聊天日志很大。

我该如何实现这个目标？

我尝试了以下操作，scrollTop属性没有滚动我的textarea.

<textarea #chat class="form-control" rows=20 disabled [(ngModel)]="output" [scrollTop]="scroll" name="chatMessages"></textarea>

但是，不会更改到 valuethis.scroll=9999的绑定。我控制台 log ，它的值为，但我的没有到底部！scrollTop9999this.scroll9999textarea

请我需要帮助，谢谢！

Answer 1

我找到了一种更简单的方法，即使ngModel实时更改（聊天），它也会自动滚动到底部。只需将scrollTop property文本区域的 与其当前的进行映射即可scrollHeight：

<textarea [(ngModel)]="..." #textarea [scrollTop]="textarea.scrollHeight"></textarea>