Angular2：使用較大的ngFor List增強滾動事件的性能

Question

我正在開發網絡聊天，聊天結構顯示如下消息：

<div class="scrollable" (scroll)="detectTop($event)">
    <div class="message-ballon" *ngfor="message in messages">
        <span class="time-chat" *ngIf="showTime(message)"> {{message.time}} </span>
        <p class="message-content"> {{message.content}} </p>
     </div>
</div>

我的detectTop（e）函數檢查是否scrollTop === 0，如果是，它將從服務器獲取更多消息並使用它更新消息。

我的showTime函數將消息與其上方的消息進行比較，以檢查它是否為同一日期。

問題在於該應用程序運行緩慢，沒有滾動事件，滾動正常且非常快。

我確實想提高性能，但是我不知道如何做。

有一種更快的方法來檢測scrollTop事件，而不會對性能產生太大影響？

即使只有10條消息列表，問題也很大，並且有超過100條消息，滾動停止

Answer 1

嘗試將跟蹤器添加到* ngFor循環中：

*ngFor="let message of messages; trackBy:messageTracker

並在您的JS代碼中：

messageTracker(index, message) {
  return message? message.id : undefined;
}

這樣可以避免重新渲染滾動消息