Nebular 聊天组件 - 不会自动滚动到底部？

Question

我将 Nebular 与 Angular 一起使用，特别是聊天 UI 组件。我主要从默认情况下使用它并且没有太大变化 - 但是当我测试它并添加新消息时 window 不会自动滚动到底部。这显然是相当多的用户体验，我不知道如何改变它。不确定要查看哪个文件，因为聊天组件文件太多，但这些是我的主要聊天机器人文件：

chatbot.component.html:

<nb-chat title="Conversation with a Bot">

    <nb-chat-message *ngFor="let msg of messages"
                     type="text"
                     [message]="msg.text"
                     [reply]="msg.reply"
                     [sender]="msg.sender"
                     [date]="msg.date"
                     [avatar]="msg.avatar">
    </nb-chat-message>


    <nb-chat-message *ngIf="loading" [nbSpinner]="loading" nbSpinnerStatus="info"
        type="text"
        avatar="/assets/gcp.png"
        message="...">

    </nb-chat-message>


  <nb-chat-form (send)="handleUserMessage($event)"></nb-chat-form>

</nb-chat>

我的一部分chatbot.component.ts

@Component({
  selector: 'app-chatbot',
  templateUrl: './chatbot.component.html',
  styleUrls: ['./chatbot.component.scss']
})

另一部分chatbot.component.ts

  addBotMessage(text) {
    this.messages.push({
      text: text,
      sender: 'Bot',
      avatar: '/assets/gcp.png',
      date: new Date()
    });
  }

此外，还有人知道如何获取日期的时间，因为它目前只生成没有时间的当前日期。

Answer 1

我不熟悉 Nebular 组件，但是我看到了 addBotMessage 方法，我相信一旦消息传入就会触发该方法。您需要做的就是将 window.scroll 方法添加到 addBotMessage()

window.scroll(0,document.body.scrollHeight)

适用于所有常见浏览器。滚动到顶部将是：

  window.scroll(0,0)

申请你的方法：

  addBotMessage(text) {
    this.messages.push({
      text: text,
      sender: 'Bot',
      avatar: '/assets/gcp.png',
      date: new Date()
    });
    window.scroll(0,document.body.scrollHeight)
  }

希望对您有所帮助。

Nebular 聊天组件 - 不会自动滚动到底部？

Nebular chat component - not scrolling to bottom automatically?

javascript

chat

chatbot

angular

nebular