javascript - Angular 选择器组件生命周期 - ngoninit/ngondestroy/等。如果嵌套在另一个之下，则会被触发。这种行为可以避免吗？

Question

我正在构建一个应用程序，其中的页面结构如下:

从 Firestore 渲染的对象(如 instagram 中发布的项目)

• 评论已加载(获取上面对象的 id 来呈现评论子集合)
  • 已加载回复(使用上面的对象 ID 和评论来呈现回复子集合)

以下是从代码 Angular 来看的内容 - 简化版本:

<div class="container">
  {{ object.data.text }}
  {{ object.data.likes.length }}
  <comment objectid="{{object.id}}">
</div>

评论选择器

我有一个像这样的模板 - 简化版本:

<div *ngFor="let comment of comments | async" class="container">
  {{ comment.data.text }}
  {{ comment.data.likes.length }}
  <reply commentid="{{comment.id}}">
</div>

回复选择器

我有一个像这样的模板 - 简化版本:

<div *ngFor="let reply of replies | async" class="container">
  {{ comment.data.text }}
</div>

问题:当对象的 comment.data.likes.length 更改时，回复选择器将经历完整的 ngoninit 和 ngondestroy 生命周期。但是，如果 object.data.likes.length 发生变化，则评论或回复选择器都不会发生生命周期触发器。每次有人点赞评论时，最终用户都会看到前端刷新的回复，这不是一种愉快的体验。

有人以前遇到过这个问题或者知道如何解决吗？

Answer 1

这里的问题是，每次 *ngFor 中的数组更改它的引用时，Angular 都会重新渲染所有项目，因为他不知道哪个项目已更改，因此他删除了所有内容并放入再次回来。

你需要做的是实现trackBy函数，它会告诉Angular如何比较for中的对象，并观察它们是否发生了变化。知道他将能够只替换已更改的项目，而不是再次替换所有内容。

所以，而不是

*ngFor="让评论的评论 | 异步",

你需要:

*ngFor="让评论的评论 | async; trackBy: myTrackByFn"

其中 myTrackByFn 是您将在 .ts 文件中实现的函数:

myTrackByFn(index, item) {
    return item.id; // add the unique key for the item being iterated
}

请记住为您拥有的所有三个 *ngFor 实现此函数。