Angular中Nebular聊天组件滚动加载消息事件未触发求助

问题核心原因 #

NbChatComponent内部封装了独立的滚动容器（类名为.nb-chat-scrollable的div），直接在<nb-chat>标签上使用ngx-infinite-scroll或NbInfiniteListDirective时，指令会监听<nb-chat>本身的滚动事件，而非内部真实滚动容器的事件，导致滚动触发逻辑失效。

解决方案一：手动监听内部滚动容器事件 #

通过@ViewChild获取NbChat实例，直接监听其内部滚动容器的scroll事件，判断滚动位置触发加载：

组件代码（TS） #

import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
import { NbChatComponent } from '@nebular/theme';

@Component({
  selector: 'app-your-chat-component',
  templateUrl: './your-chat-component.html',
  styleUrls: ['./your-chat-component.scss']
})
export class YourChatComponent implements OnInit, OnDestroy {
  @ViewChild('chatComponent') chatComponent!: NbChatComponent;
  private scrollHandler: (() => void) | undefined;
  messages: any[] = [];
  isLoading = false;

  ngOnInit(): void {
    this.initScrollListener();
  }

  ngOnDestroy(): void {
    if (this.scrollHandler && this.chatComponent.scrollableElement) {
      this.chatComponent.scrollableElement.removeEventListener('scroll', this.scrollHandler);
    }
  }

  private initScrollListener(): void {
    // 等待组件DOM初始化完成，确保能获取到内部滚动容器
    setTimeout(() => {
      const scrollContainer = this.chatComponent.scrollableElement;
      if (!scrollContainer) return;

      this.scrollHandler = () => {
        // 滚动距离顶部小于50px时触发加载（可根据需求调整阈值）
        if (scrollContainer.scrollTop <= 50 && !this.isLoading) {
          this.isLoading = true;
          this.loadOlderMessages().finally(() => {
            this.isLoading = false;
            // 加载后调整滚动位置，避免连续触发
            scrollContainer.scrollTop = 60;
          });
        }
      };
      scrollContainer.addEventListener('scroll', this.scrollHandler);
    }, 100);
  }

  async loadOlderMessages(): Promise<void> {
    // 替换为你的历史消息请求逻辑
    // const olderMessages = await this.chatApi.getOlderMessages(this.messages[0].id);
    // this.messages = [...olderMessages, ...this.messages];
  }
}

解决方案二：指定ngx-infinite-scroll的滚动目标容器 #

修改ngx-infinite-scroll的配置，指定其监听NbChat内部的滚动容器：

模板代码修改 #

<nb-chat
  #chatComponent
  [scrollBottom]="false"
  class="search-results"
  infinite-scroll
  [infiniteScrollContainer]="'.nb-chat-scrollable'"
  [infiniteScrollUpDistance]="2"
  [infiniteScrollThrottle]="500"
  (scrolledUp)="loadOlderMessages()"
>
  <nb-chat-message
    *ngFor="let msg of messages"
    [type]="msg.type"
    [message]="msg.text"
    [reply]="msg.reply"
    [sender]="msg.user.name"
    [date]="msg.date"
    [dateFormat]="'h:mm a'"
    [files]="msg.files"
  >
  </nb-chat-message>

  <nb-chat-form
    (send)="sendMessage($event)"
    [dropFiles]="false"
    [attr.automation-id]="'chat_box_send_message'"
  >
  </nb-chat-form>
</nb-chat>

关键处理点 #

1. 关闭[scrollBottom]="true"：加载历史消息时，NbChat默认会自动滚动到底部，需要先关闭该属性，避免覆盖手动滚动位置
2. 加载后调整滚动位置：新增历史消息会改变滚动容器的总高度，需手动调整scrollTop保持用户当前视角：

async loadOlderMessages(): Promise<void> {
  if (this.isLoading) return;
  this.isLoading = true;
  
  const scrollContainer = this.chatComponent.scrollableElement;
  const preLoadScrollTop = scrollContainer?.scrollTop || 0;
  const preLoadMessageCount = this.messages.length;

  // 请求历史消息
  // const olderMessages = await this.chatApi.getOlderMessages();
  // this.messages = [...olderMessages, ...this.messages];

  // 调整滚动位置，保持用户视角
  setTimeout(() => {
    if (scrollContainer) {
      const messageHeightDelta = (this.messages.length - preLoadMessageCount) * 80; // 估算单条消息高度，可根据实际调整
      scrollContainer.scrollTop = preLoadScrollTop + messageHeightDelta;
    }
    // 仅当用户原本在底部时，重新开启自动滚动
    const isAtBottom = scrollContainer.scrollHeight - scrollContainer.scrollTop <= scrollContainer.clientHeight + 10;
    this.chatComponent.scrollBottom = isAtBottom;
  }, 0);
  
  this.isLoading = false;
}

注意事项 #

• 必须添加加载状态锁（isLoading），防止滚动事件连续触发多次请求
• 若使用NbInfiniteListDirective，核心逻辑一致：需指定滚动目标为内部.nb-chat-scrollable容器
• 消息高度估算可根据实际样式调整，或通过DOM计算单条消息的真实高度，提升位置调整精度

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