Angular 2滚动到底部（聊天风格）

html
<div class="chat-contAIner" #chatContAIner>
  <div class="chat-message" *ngFor="let message of messages">
    {{ message.text }}
  </div>
</div>

元素，并将消息的文本内容显示在该元素中。chatContAIner是一个本地引用，我们将在后面的步骤中使用它。

步骤2：使用ViewChild获取滚动容器的引用

接下来，我们需要在组件中获取滚动容器的引用。我们可以使用ViewChild装饰器来实现这一点。

typescript
import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.CSS']
})
export class ChatComponent {
  @ViewChild('chatContAIner') chatContAIner: ElementRef;
  messages = [...]; // 初始化消息数组
  // 省略其它代码
}

在上面的代码中，我们使用ViewChild装饰器来获取名为chatContAIner的本地引用，并将其类型设置为ElementRef。ElementRef提供了对DOM元素的访问。

步骤3：滚动到底部

最后，我们需要编写一个方法来滚动到底部。我们可以使用nativeElement属性来访问滚动容器的DOM元素，并使用scrollHeight属性和scrollTop属性来进行滚动操作。

typescript
scrollToBottom(): void {
  const chatContAIner = this.chatContAIner.nativeElement;
  chatContAIner.scrollTop = chatContAIner.scrollHeight;
}

在上面的代码中，我们首先获取滚动容器的DOM元素，并将其保存在一个局部变量chatContAIner中。然后，我们将scrollTop属性设置为scrollHeight属性的值，这将使滚动条滚动到底部。

使用案例

现在，我们可以在适当的时机调用scrollToBottom方法，以便在新消息到达时自动滚动到底部。例如，在添加新消息到messages数组后，我们可以立即调用scrollToBottom方法。

typescript
addNewMessage(message: string): void {
  this.messages.push({ text: message });
  this.scrollToBottom();
}

在上面的代码中，我们首先将新消息添加到messages数组中，然后立即调用scrollToBottom方法。

通过以上步骤，我们可以使用Angular 2实现聊天风格的滚动到底部功能。首先，在HTML模板中设置滚动容器，并使用ngFor指令来显示消息。然后，使用ViewChild装饰器获取滚动容器的引用，并编写滚动到底部的方法。最后，在适当的时机调用该方法，以实现自动滚动到底部的效果。希望这篇文章对你有所帮助！