Angular应用聊天模块加载时如何自动展示会话最后一条消息

前置样式要求 #

首先确保聊天消息容器.msg_history配置了滚动基础样式，否则滚动逻辑无法生效：

.msg_history {
  height: 500px; /* 按实际业务需求设置固定高度 */
  overflow-y: auto;
  /* 其余原有样式保持不变 */
}

具体实现步骤 #

• 第一步：修改HTML模板，添加模板引用标记
  给外层滚动容器加Angular模板变量，同时在*ngFor循环中标记最后一条消息节点，方便后续定位：

<div class="msg_history" #msgContainer>
  <li 
    class="message" 
    *ngFor="let message of messages; let last = last"
  >
    <div
      *ngIf="
        message.receiver_username == myUserName;
        then incoming_msg;
        else outgoing_msg
      "
    ></div>
    <ng-template #incoming_msg>
      <div class="incoming_msg">
        <div class="incoming_msg_img">
          <img
            src="https://i.imgur.com/k2PZLZa.png"
            alt="User avatar"
          />
        </div>
        <div class="received_msg">
          <div class="received_withd_msg">
            <h5>{{message.timestamp | date : 'medium':'GMT'}}</h5>
            <p>{{ message.message }}</p>
          </div>
        </div>
      </div>
    </ng-template>
    <ng-template #outgoing_msg>
      <div class="outgoing_msg">
        <div class="sent_msg">
          <h5>{{message.timestamp | date : 'medium':'GMT'}}</h5>
          <p>{{ message.message }}</p>
        </div>
      </div>
    </ng-template>
  </li>
</div>

• 第二步：在组件类中引入视图查询，编写滚动逻辑
  用@ViewChild拿到滚动容器的DOM引用，封装通用滚动方法，在视图渲染完成、消息列表更新后触发滚动。注意要等DOM完全渲染后再执行滚动，否则会出现容器高度计算不准的问题。

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  // 组件原有配置保持不变
})
export class ChatComponent implements AfterViewInit {
  // 绑定消息容器DOM
  @ViewChild('msgContainer') msgContainer!: ElementRef<HTMLDivElement>;
  // 原有业务变量保持原有声明即可
  messages: any[] = [];
  myUserName: string = '';

  ngAfterViewInit(): void {
    // 页面初始化、消息列表首次渲染完成后滚动到底部
    setTimeout(() => this.scrollToBottom());
  }

  /**
   * 滚动聊天区到底部，展示最新消息
   */
  scrollToBottom(): void {
    try {
      const container = this.msgContainer.nativeElement;
      container.scrollTop = container.scrollHeight;
    } catch (err) {
      console.error('聊天区滚动异常:', err);
    }
  }

  // 所有会更新messages数组的逻辑，在赋值完成后都要调用滚动方法
  // 比如拉取历史消息接口返回后：
  // loadHistoryMsg() {
  //   this.api.getChatHistory().subscribe(res => {
  //     this.messages = res.data;
  //     setTimeout(() => this.scrollToBottom());
  //   })
  // }
  // 比如发送新消息、收到实时推送消息后，给messages数组push新项后同样调用scrollToBottom()
}

注意事项 #

• 异步拉取消息、推送新消息的场景下，必须在messages数组赋值完成后加0延时的setTimeout再调用滚动方法，等待Angular完成*ngFor的DOM渲染，否则会出现滚动位置不准的问题。
• 不要在ngAfterViewChecked生命周期里不加判断直接调用滚动方法，这个钩子触发频率极高，会导致页面滚动卡顿，仅在首次加载、消息列表更新、新消息到达三个场景触发即可。

内容的提问来源于stack exchange，提问作者nargyriou