Принудительная прокрутка стиля чата до нижней части элемента при вызове новых данных - PullRequest
Новая
       6

Принудительная прокрутка стиля чата до нижней части элемента при вызове новых данных

0 голосов
/ 01 августа 2020

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

Проблема в том, что пока я могу заставить его прокручиваться , Я не могу заставить его прокрутить мимо нового сообщения, и в лучшем случае он прокручивается до предпоследнего сообщения, как будто он не понимает, что для прокрутки необходим новый элемент.

Вещь, которую я пробовал: я попробовал ngAfterViewInit для решения, хотя проблема здесь заключается в том, что я использую материальный дизайн для кнопок, и простая прокрутка кнопок с всплывающими подсказками в компоненте вызывает это срабатывание, заставляя прокрутку вниз в нежелательные моменты. Я пробовал ngOnChanges, который распознает изменение сообщений, хотя даже думал, что он может его распознать, установив logi c для распознавания этого изменения, все равно не заставляет окно проходить предпоследнее сообщение

Что касается кода , это синтаксис, который отправляет новое сообщение, которое вызывает метод в компоненте viewchild (являющемся окном чата) для прокрутки вниз ПОСЛЕ публикации сообщения. 

  public async send(messageResponse: MessageApiResponse)
  {
    this.postingMessage = true;

    await this.SantaApiPost.postMessage(messageResponse).toPromise();
    await this.profileService.getSelectedHistory(this.profile.clientID, this.selectedHistory.relationXrefID, true);

    this.chatComponent.scrollToBottom();

    this.postingMessage = false;
  }

метод в дочернем элементе, который он вызывает, только для справки 

  public scrollToBottom(): void {
    try {
        this.chatFrame.nativeElement.scrollTop = this.chatFrame.nativeElement.scrollHeight;
    } catch(err) { }
  }

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

1 Ответ

0 голосов
/ 02 августа 2020

Хотя вы await для нового сообщения, которое будет отправлено, функция прокрутки вниз выполняется перед отрисовкой этого сообщения в модели DOM. Таким образом, код действительно выполняет свою работу, он просто запускается слишком рано.

setTimeout(callback, 0) исправляет такое поведение, добавляя новое событие в очередь событий браузера. Таким образом, позволяя манипуляции с DOM (добавление нового сообщения) завершиться перед вызовом функции прокрутки вниз.

...