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;
}

这样可以避免重新渲染滚动消息