onPush检测策略在角度8中不起作用

Question

I am creating an application in angular 8 and presently working on dashboard module where i have a scenario where onPush Strategy doesn't seems to be working i will be explaining my scenario with div structure if anyone can help me on this.

<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>

Above is the scenario where i am changing widget.widgetName in app-widget-settings component, where app-widget-settings consist of text box which is bind with widget.widgetName using ngModel .

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

here but my changes is not reflected in app-widget-body component where i am using

changeDetection: ChangeDetectionStrategy.OnPush

if i am removing changeDetection from app-widget-body then changes are reflected.

So in above what should we use so that changes when done in app-widget-settings component are reflected in app-widget-body component and i want to use ChangeDetectionStrategy.OnPush.

Below is the link for stackblitz

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

Answer 1

This is actually the expected behavior.

Each and every component has her own Change Detection Ref, and when you changing the strategy to OnPush strategy you have to remember that in order to cause the change detector to "tick" you have to pass a new reference of your input.

In this case, you just edit one of the properties of the widget, but didn't really change his reference.

Try to emit an event every time you change the widget object, and then, in the container component just return a new object overriding the change. Something like:

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

Answer 2

You need to "bubble up" changes to the Dashboard component for it to reload ( change its reference ) its array of widgets:

https://stackblitz.com/edit/angular-mzxcbd

It is tedious and not very pretty. In general it is not recommended for deeply nested objects. A good alternative approach is to use the redux pattern with NGRX for example. A central store holds your data and any component can access it, independantly from its hierarchy. I highly recommend it.

Answer 3

When you use ChangeDetectionStrategy.OnPush, you have to follow a rule ' Every variable that does not come from @Input(), is used in template and may be changed during lifetime of component, should be in template as a stream(Observable) with pipe async '

Angular also has 3 classes for reactive data:

• FormArray - for arrays
• FormGroup - for maps
• FormControl - for simple values

Notice that you should only modify data in theese classes only via provided APIs, like FormControl.setValue(value) for them to emit change event, which will tell async pipe to trigger change detection cycle

In your case I would use FormArray of FormGroup elements, which would have FormControl for each field.

Access to fields would be like

<div class="parent" *ngFor="widgetFormGroupIndex of widgetIndexList">
  {{ dataFormArray.at(widgetFormGroupIndex).get('widgetName').valueChanges | async }}
</div>

Also you should use directive from ReactiveFormsModule in your input, like this

<input type="text" [formControl]="dataFormArray.at(widgetFormGroupIndex).get('widgetName')">

For further info read https://angular.io/guide/reactive-forms

Also note that you shouldn't call methods in templates(it calls them in every change detection cycle), the code uses methods for simplicity. Instead of func calls you should either create pure pipes(for more info read here https://angular.io/guide/pipes ) or precompute func call results in your component.ts file, then use results in template