ExpressionChanged错误，但没有生命周期钩子复制在StackBlitz上

Question

我正在尝试访问几个物料抽屉，以便可以在另一个组件中打开/关闭它们，但是出现以下错误：

NavigationComponent.html:30 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'sideNavsDrawers: undefined'. Current value: 'sideNavsDrawers: [object Object],[object Object]'.

我已经读到，这通常是在生命周期挂钩中添加不合适的功能的产物，但是我刚刚启动了此应用程序，并且生命周期挂钩为零。

我正在尝试将QueryList的MatSideNav传递给导航组件。

@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.scss']
})
export class NavigationComponent {
  @ViewChildren(MatSidenav) sideNavsDrawers: QueryList<MatSidenav> | undefined;
}

我有其模板内

<app-toolbar [sideNavsDrawers]="sideNavsDrawers"></app-toolbar>

并且在该组件内

@Component({
  selector: 'app-toolbar',
  templateUrl: './toolbar.component.html',
  styleUrls: ['./toolbar.component.scss']
})
export class ToolbarComponent implements OnInit {
  @Input() sideNavsDrawers: QueryList<MatSidenav> | undefined;
}

[为undefined添加并集是我在错误中看到先前的值为undefined时添加的，但是我不知道是否有必要。

为什么这些非常简单的组件会产生此错误，如何消除该错误？

Reproduced on StackBlitz

Answer 1

当更新视图时，用于数据绑定的值发生更改时会触发异常，在QueryList中填充有ViewChildren的NavigationComponent就是这种情况。

您可以通过这种方式避免出现异常：

将sideNavsDrawers输入属性重新定义为数组：

export class ToolbarComponent implements OnInit {
  @Input() sideNavsDrawers: Array<MatSidenav>;
}

[使用模板引用变量构造数组，而不使用ViewChildren：

<mat-sidenav #leftDrawer ... >
...
<mat-sidenav #rightDrawer ... >
...
<app-toolbar [sideNavsDrawers]="[leftDrawer, rightDrawer]">

请参见this stackblitz以获取演示。