angular - 使用 Angularfire 的 Firestore Observable 优化变化检测

Question

在经历了一些浏览器内的迟缓之后，我试图在我的 Angularfire 驱动的应用程序中优化变化检测。我读了this SO answer并尝试以类似方式为我的列表代码建模。

我的容器类:

<section *ngIf="inclusions$ | async as standardList">
  <bl-list-item *ngFor="let standard of standardList; 
                trackBy: identify" [inclusion]="standard">
  </bl-list-item>
</section>


NOTE: inclusions$ is an Oberservable<any[]> from Angularfire's Firestore.

跟踪功能:

identify(index, item) {
  return item.id;
}

演示组件:

@Component({
  selector: 'bl-list-item',
  ...
  changeDetection: ChangeDetectionStrategy.OnPush
})

问题: ngOnChanges 会为 bl-list-item 的所有实例调用，每当单个关联文档的数据更新时在 Firestore 中。例如，如果我在 Firestore 网络控制台中对 Item-Doc 进行编辑，所有 bl-list-item 实例都会触发 ngOnChanges，不仅仅是受更改影响的项目。

如何正确配置列表项组件，以便 ngOnChanges 仅在受影响的项目中触发？

Answer 1

调用 ngOnChanges 是故意的。通过更改检测 onPush，您可以在更新组件 View 时更改行为。如果现在出于某种原因更新组件的 View ，则始终调用所有 CHILD 组件的 ngOnChanges Hook 。

在您的情况下，容器组件运行更改检测并为您的列表项组件调用 ngOnChanges Hook 。更改列表项组件的变化检测策略与此无关。