Let's consider the following scenario:
We have a component called @permissions which contains a button that triggers a simple promise to set a value on another component called @MenuComponent.
export class Permissions {
constructor(private _menu: MenuComponent, private _api: ApiService) {}
btnAction(){
this._api.getDataID(item.project_name, 'usersbyID', userID).then((data: any) => {
this._menu.checkPerm(JSON.parse(data.permissions).description);
});
}
}
The data returned by the promise is in JSON format.
Now, in the @MenuComponent:
@Component({
// ...other configuration details not relevant
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MenuComponent implements OnInit {
menus = []
menuPermisson: any;
menuObservable = new Subject();
constructor(private _cdRef: ChangeDetectorRef) {
this.menuObservable.subscribe(value => {
this.menuPermisson = value;
this.reloadAll();
});
}
reloadAll() {
this.menus.push('someValue');
this._cdRef.markForCheck();
}
checkPerm(data) {
this.menuObservable.next(data);
}
}
The goal is to update the view with "someValue" after receiving data from the promise. However, when trying to re-render the view using this._cdRef.detectChanges(), an error message saying "Attempt to use a destroyed view: detectChanges" is returned. It seems challenging to display "someValue" on the menu despite both components being at the same level in the ChangeDetection Tree.
Therefore, there seems to be a struggle in rendering the updated menu with the desired content.