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。

使用Angularfire的Firestore Observable <any []优化优化检测

2 个答案: