angular 6 приложение чата и высота идентификатора

Question

В моем приложении angular 6 у меня есть окно чата, где пользователь отправляет сообщение в окне чата, происходит то, что после каждой отправки сообщения я прокручиваюсь вниз, чтобы пользователь мог видеть последнее сообщение, которое он может ввести, поэтому у меня есть ниже функция, которая помогает мне частично достичь того же. но после некоторого количества сообщений это не прокручивается вверх, поэтому я не вижу последних сообщений.

 function scrollToTheEnd(divId) {
    var $target = $('#' + divId);
    $target.animate({
      scrollTop: $target.height()
    }, 'slow');
  }

У меня есть div с messages

<div id ="messages"></div>

Answer 1

Не рекомендуется смешивать Angular с JQuery. Все в JQuery может быть выполнено с использованием Angular. В этом конкретном случае c вы можете использовать AfterViewChecked ловушку жизненного цикла с ссылочной переменной шаблона . Из документов ловушка

вызывается после того, как детектор изменений по умолчанию завершил проверку вида компонента на наличие изменений.

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

Попробуйте следующее:

Шаблон

<div id="divId" #chat>
  ...
</div>

<button (click)="scrollToBottom()">Down</button>

Контроллер

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

export class AppComponent implements OnInit, AfterViewChecked {
  @ViewChild('chat') private chatBox: ElementRef;
  .
  .

  // auto scroll to bottom
  /*
  ngAfterViewChecked() {        
    this.scrollToBottom();        
  }
  */ 

  scrollToBottom(): void {
    this.chatBox.nativeElement.scrollTop = this.chatBox.nativeElement.scrollHeight;
  }
}