angular - onPush 检测策略在 Angular 8 中不起作用

Question

我正在 Angular 8 中创建一个应用程序，目前正在开发仪表板模块，其中我有一个 onPush 策略似乎不起作用的场景，如果有人可以帮助我，我将用 div 结构解释我的场景。

<div class="parent" *ngFor="dashcontent of dashbboardsData">

<app-widget-body [widget]="dashcontent.widget"></app-widget-body>


</div>


<div class="sidebar"> 

<app-sidebar [(selectedWidget)]="dashbboardsData[0].widget">

<app-widget-settings [(widget)]="selectedWidget"></app-settings>

</app-sidebar>

</div>

上面是我在 app-widget-settings 组件中更改 widget.widgetName 的场景，其中 app-widget-settings 由与 widget.widgetName< 绑定(bind)的文本框组成/strong> 使用ngModel。

<input type="text" [(ngModel)]="widget.widgetName">

在这里，但我的更改没有反射(reflect)在我使用的app-widget-body组件中

changeDetection:ChangeDetectionStrategy.OnPush

如果我从 app-widget-body 中删除changeDetection，则会反射(reflect)更改。

那么在上面我们应该使用什么，以便在 app-widget-settings 组件中完成的更改反射(reflect)在 app-widget-body 组件中，我想使用ChangeDetectionStrategy.OnPush。

下面是 stackblitz 的链接

https://stackblitz.com/edit/angular-gjdjzg?file=src%2Fapp%2Fapp.component.ts

Answer 1

这实际上是预期的行为。

每个组件都有自己的更改检测引用，当您将策略更改为 OnPush 策略时，您必须记住，为了使更改检测器“勾选”，您必须通过您输入的新引用。

在本例中，您只需编辑该小部件的一个属性，但并未真正更改他的引用。

尝试在每次更改小部件对象时发出一个事件，然后在容器组件中仅返回一个覆盖更改的新对象。像这样的东西:

onNameChange(name: string){
   this.widget = {...this.widget, widgetName: name}
}