Компонент Nebular Chat - автоматическая прокрутка вниз не происходит? - PullRequest
Новая
       94

Компонент Nebular Chat - автоматическая прокрутка вниз не происходит?

0 голосов
/ 09 мая 2020

Я использую Nebular с Angular, особенно с компонентом пользовательского интерфейса чата. Я в основном использовал его по умолчанию и мало что изменил, однако, когда я тестирую его и добавляю новые сообщения, окно автоматически не прокручивается вниз. Очевидно, что это довольно сложный пользовательский опыт, и я не знаю, как его изменить. Не уверен, какой файл искать, так как существует так много файлов компонентов чата, но это мои основные файлы чат-бота:

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>

Часть моего чат-бота .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()
    });
  }

Также, в качестве бонуса, кто-нибудь знает, как получить время с датой, как сейчас выводит только текущую дату без времени.

1 Ответ

0 голосов
/ 09 мая 2020

Я не знаком с Nebular Component, однако я вижу метод 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)
  }

Надеюсь, это помогло.

...