在服务中使用 FormArray 时的 OnPush 更改检测答案

【问题标题】：OnPush change detection when using a FormArray in a service在服务中使用 FormArray 时的 OnPush 更改检测
【发布时间】：2021-08-04 17:30:53
【问题描述】：

各位开发者，

我有一个存储FormArray 的服务，它由一个组件附加并由另一个组件查看。即使FormArray 是不可变的并且被重新分配，视图也没有成功更新。

如果不使用OnPush 更改检测，或者使用changeDetectorRef.detectChanges() 强制刷新更改检测，问题就会消失。不过，这两种解决方案都让人觉得很老套，我真的不明白为什么它不能正常工作。

有问题的示例 repo：https://stackblitz.com/edit/angular-9hwgcn?file=src/app/app.component.html（添加商品后，购物商品列表不会更新）

【问题讨论】：

标签： angular angular-reactive-forms angular2-forms angular2-changedetection angular-changedetection

【解决方案1】：

ChangeDetectionStrategy.OnPush 停止自动更改检测，就像您所经历的那样。它的用例主要是输入/输出组件；它告诉他们仅在 @Input 更改时检测更改。

话虽如此，当我查看您的代码时，

您没有@Input 组件
您的组件没有父/子关系
您正在进行全球运营

然后您停止自动更改检测。在这种情况下，您必须告诉 Angular 需要检测到更改。

所以不，它不是 hacky，是的，它可以正常工作。

尽管如此，如果您想避免所有这些并希望您的代码更具反应性，您可以使用 observables/subjects。这是一个例子：

export class ShoppingListService {
  shoppingListForm: BehaviorSubject<FormArray> = new BehaviorSubject(
    this.fb.array([])
  );

<ng-container *ngIf="shoppingListService.shoppingListForm | async as shoppingListForm">
  <div class="course-item" *ngFor="let shoppingListItem of shoppingListForm.controls">
    <p>{{ shoppingListItem.value | json }}</p>
  </div>
</ng-container>

Stackblitz

【讨论】：

完美，谢谢。我现在对OnPush 的理解好多了。