Прокрутка до нижней части div без использования setTimeout ()

Question

Я делаю внутреннюю систему чата с использованием Firebase.Я звоню, чтобы получить список всех сообщений чата:

firebase.database().ref('chatrooms/'+this.roomkey+'/chats').on('value', resp => {

    this.chats = [];
    this.chats = snapshotToArray(resp);

    setTimeout(() => {
        if(this.content._scroll) { this.content.scrollToBottom(0); }
    }, 1000);

});

На мой взгляд, у меня есть этот HTML-код для циклического чата:

<ion-content>
  <ion-list>
    <ion-item *ngFor="let chat of chats" no-lines>
      <div class="chat-status" text-center *ngIf="chat.type==='join'||chat.type==='exit';else message">
        <span class="chat-date">{{chat.sendDate | date:'short'}}</span>
        <span class="chat-content-center">{{chat.message}}</span>
      </div>
      <ng-template #message>
        <div class="chat-message" text-right *ngIf="chat.user === nickname">
          <div class="right-bubble">
            <span class="msg-name">Me</span>
            <span class="msg-date">{{chat.sendDate | date:'short'}}</span>
            <p text-wrap>{{chat.message}}</p>
          </div>
        </div>
        <div class="chat-message" text-left *ngIf="chat.user !== nickname">
          <div class="left-bubble">
            <span class="msg-name">{{chat.user}}</span>
            <span class="msg-date">{{chat.sendDate | date:'short'}}</span>
            <p text-wrap>{{chat.message}}</p>
          </div>
        </div>
      </ng-template>
    </ion-item>
  </ion-list>
</ion-content>

А вот мой соответствующий CSS:

ion-content {
  height: 100%;
  overflow: hidden;
  .item-md, .item-ios {
    background: none;
  }
}

В настоящее время имеется 30 сообщений чата.Они загружаются из Firebase, а затем через секунду, когда setTimeout завершается, пользователь автоматически прокручивается вниз страницы, чтобы увидеть самое последнее сообщение.Это делает загрузку страницы немного странной с переходом вниз на нижнюю часть страницы через секунду.

Есть ли способ заменить тайм-аут чем-то, что достигнет цели, которую пользователь изначально видит наиболеепоследние сообщения?Может быть, есть какой-то триггер, который обнаруживает, что chats изменился в представлении, а затем выполняет прокрутку?Это может показаться лучше, чем фиксированная 1-секундная пауза?

Answer 1

Вы можете перейти к нижней части списка, когда обнаружены изменения в списке чатов:

• Свяжите ссылочную переменную шаблона с элементами ion-item (например, #chatItems)
• Используйте ViewChildren, чтобы получить QueryList из ion-item элементов
• В ngAfterViewInit подпишитесь на событие QueryList.changes
• Прокрутите до конца списка, когда список изменится

<ion-content>
  <ion-list>
    <ion-item #chatItems *ngFor="let chat of chats" no-lines>
      ...
    </ion-item>
  </ion-list>
</ion-content>

export class MyComponent {

  @ViewChildren("chatItems") chatItems: QueryList<any>;

  ngAfterViewInit() {
    this.scrollContentToBottom();
    this.chatItems.changes.subscribe(() => {
      this.scrollContentToBottom();
    });
  }

  scrollContentToBottom() {
    if(this.content._scroll) { 
      this.content.scrollToBottom(0); 
    }
  }
  ...
}

Примечание: я использовал QueryList<any>, потому что я не знаю тип компонента ion-item. Вы можете поставить соответствующий тип, если вы знаете, что это такое.