angular 6聊天框应用程序和id高度

Question

在我的angular 6应用程序中，我有一个聊天框，用户可以在聊天窗口中发送消息，每次发送消息后，我都会向下滚动，这样用户就可以看到他们可以输入的最新消息，因此我有以下功能，可以部分帮助我实现这一点。但在收到一些消息后，它不会向上滚动，所以我看不到最新消息。

function scrollToTheEnd(divId) {
var $target = $('#' + divId);
$target.animate({
scrollTop: $target.height()
}, 'slow');
}

我有带messages的div

<div id ="messages"></div>

Answer 1

不建议将Angular与JQuery混合使用。JQuery中的所有内容都可以使用Angular来完成。在这种特定情况下，您可以将AfterViewChecked生命周期挂钩与模板引用变量一起使用。从文档来看，挂钩是

在默认更改检测器完成对组件的更改视图。

因此，只要视图发生更改，就会调用它。

尝试以下操作：

模板

<div id="divId" #chat>
...
</div>
<button (click)="scrollToBottom()">Down</button>

控制器

import {Component, AfterViewChecked, ElementRef, ViewChild, OnInit} from '@angular/core';
export class AppComponent implements OnInit, AfterViewChecked {
@ViewChild('chat') private chatBox: ElementRef;
.
.
// auto scroll to bottom
/*
ngAfterViewChecked() {        
this.scrollToBottom();        
}
*/ 
scrollToBottom(): void {
this.chatBox.nativeElement.scrollTop = this.chatBox.nativeElement.scrollHeight;
}
}