使用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.

trackBy功能：

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

表示组成部分：

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

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

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

Answer 1

调用ngOnChanges是故意的。通过更改检测onPush，可以更改组件视图更新时的行为。如果现在因任何原因更新了组件的视图，则始终调用所有CHILD组件的ngOnChanges挂钩。

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

Answer 2

您可以尝试使用stateChanges(['added'])来避免不必要的更新，如shown in the documentation。