ExpressionChangedAfterItHasBeenCheckedError 在启用 Ivy 时从 child 更改 parent 属性后更新为 Angular 9

Question

我最近将我的 Angular 项目更新到版本 9。我正在使用一项服务来更新主菜单的 header，它工作成功但现在生成此错误：

core.js:5828 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'main title'. Current value: 'new title'.

每次更改标题时都会出现此错误。

这是我的代码的一部分：

我的路线：

app-routing.module.ts:

const routes: Routes = [
  {
    path: '',
    component: MainComponent,
    canActivate: [AuthGuard],
    canActivateChild: [AuthGuard],

    children: [
      {
        path: '',
        component: DashboardComponent
      },
      {
        path: 'warehouse',
        loadChildren: () =>
          import('./systems/warehouse/warehouse.module').then(
            m => m.WarehouseModule
          )
      },
      {
        path: 'commerce',
        loadChildren: () =>
          import('./systems/commerce/commerce.module').then(
            m => m.CommerceModule
          )
      },
      {
...

主要成分：

main.component.ts:

  pageTitle: string;

  ngOnInit() {
    this.mainService.pageTitle$.subscribe((title: string) => {
      this.pageTitle = title;
    });
...

我用来更改标题的服务： main.service.ts:

  public setTitle(title: string) {
    this.pageTitle$.emit(title);
  }

最后，我的一位客户在仓库模块中更改了标题：

main.service.ts:

this.mainService.setTitle('new title');

更新：

问题发生在启用 Ivy 并处于开发模式时。 "enableIvy": false 或生产时没有错误.

Answer 1

我在 ngOnInit 中调用 'setTitle' 函数。从构造函数中调用它解决了问题。

不在生产模式下会出错：

ngOnInit() {
    this.mainService.setTitle('My title');
}

这解决了问题：

constructor(
  private mainService: MainService
) {
  this.mainService.setTitle('My title');
}

Answer 2

如果从路由中获取Params 后必须更改标题怎么办。因此，您必须在 ngOnInitMethod 中使用 setTitle 方法。它给出了一个错误。

为了防止这种情况，我向 AppComponent 添加了一个更改检测器：

export class AppComponent implements OnInit, AfterContentChecked {

  constructor(public title: Title, private cdr: ChangeDetectorRef,) {
    this.titl.setHeaderTitle('Home');
  }

  ngAfterContentChecked() {
    this.cdr.detectChanges(); // It fixes but can lead to performance issues.
  }

}

ExpressionChangedAfterItHasBeenCheckedError 在启用 Ivy 时从 child 更改 parent 属性后更新为 Angular 9

ExpressionChangedAfterItHasBeenCheckedError after updating to Angular 9 on changing parent property from the child when Ivy is enabled

javascript

angular

angular9

ExpressionChangedAfterItHasBeenCheckedError 在启用 Ivy 时从 child 更改 parent 属性 后更新为 Angular 9

ExpressionChangedAfterItHasBeenCheckedError after updating to Angular 9 on changing parent property from the child when Ivy is enabled

javascript

angular

angular9

ExpressionChangedAfterItHasBeenCheckedError 在启用 Ivy 时从 child 更改 parent 属性后更新为 Angular 9