Прокрутите вниз до нового сообщения - PullRequest
Новая
       22

Прокрутите вниз до нового сообщения

0 голосов
/ 12 декабря 2018

У меня есть приложение Angular, где я сталкиваюсь с проблемой автоматической прокрутки до конца в моем контейнере чата, когда приходит новое сообщение.

Мой шаблон 

<div #msgContainer class="chat-box-body" appInfiniteScroll (scrollTop)="loadOlderMessages()">
 <ng-container *ngFor="let msg of conversation.messages.edges">
  <ng-container *ngIf="msg.node?.from?.id !== currentUser.id; else myMsg">
    <div class="sender-msg-block">
      <div class="wrapper-left">
        <img class="sender-dp"
             [src]="conversation.conversation_participants[0].conversable?.profile_picture?.url ||  'assets/images/no-user.svg'">
        <p class="sender-msg">{{msg.node.body}}</p>
        <span class="sender-time">{{msg.node.created_at}}</span>
      </div>
    </div>
  </ng-container>
  <ng-template #myMsg>
    <div #newMesssage class="receiver-msg-block">
      <div class="wrapper-right">
        <span class="receiver-time">{{msg.node.created_at}}</span>
        <p class="receiver-msg">
          {{msg.node.body}}
        </p>
      </div>
    </div>
  </ng-template>
</ng-container>

Когда я получаю новое сообщение.Эта подписка запускается внутри этой функции: 

listenIncomingMessages() {
this.chatService.messageReceived$
  .pipe(
    takeWhile(() => this.isAlive)
  )
  .subscribe((data: any) => {
    if (data) {
      const newEdge = {
        node: data
      };
      if (data.conversation_id === this.conversationId) {
        this.conversation.messages.edges = <any>[...this.conversation.messages.edges, newEdge];
        // TODO: Scroll to bottom not working
        this.msgContainer.nativeElement.scrollTop =
          this.msgContainer.nativeElement.scrollTop + this.newMesssage.nativeElement.scrollHeight;
      }
    }
  });
}

Пожалуйста, помогите.Спасибо:)

1 Ответ

0 голосов
/ 12 декабря 2018

Используйте ngAfterViewChecked для вашей помощи, используя эту ссылку

Сначала объявите 

@ViewChild('scrollMe') private myScrollContainer: ElementRef;

в вашем файле .ts.Затем в ngOnInit() определите эти две функции, которые будут обнаруживать изменения в компоненте и соответственно прокручивать вниз. 

ngAfterViewChecked() {
    this.scrollToBottom();
  }



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