不使用 setTimeout() 滚动到 div 的底部

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 获取ion-item 元素的QueryList
• 在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 组件类型。如果您知道它是什么，您可以放置​​适当的类型。