Angular 7、Ngrx、ExpressionChangedAfterItHasBeenCheckedError

Question

找了很长时间，但找不到任何东西。

我有一个这样的模板：

<learning-navigation *ngIf="(_navigationSelectedSafe$ | async) == _navigationLayout.location" [(selectMode)]="_navigationModeSelected"></learning-navigation>

在哪里：

private _navigationSelected$: Observable<string>;
private _navigationSelectedSafe$ = new EventEmitter<any>(true);

...

this._navigationSelected$.subscribe(res => {
  ...
  this._navigationSelectedSafe$.emit(res)
});

学习导航的输入是一个二传手：

  @Input()
  set selectMode(mode: number) {
    this.mode = mode;
  }

这会导致错误：

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'selectMode: null'. Current value: 'selectMode: 1'. 

我已经尝试将 EventEmitter 更改为 BehaviourSubject，在 ngInit 和 ngAfterChecked 之后强制 detectChanges()（尽管即使它工作也不是最佳的）并将其包装在一个容器中，试图将模式直接异步传递到组件中，同时只是用一个额外的 if 来控制显示。

当前的解决方案有效，似乎没有任何副作用，但无论模式何时更改，它都会引发错误。谢谢

Answer 1

您的问题表明 Angular 的变化检测之外的值发生了变化。这可能有多种原因。在您的情况下，我猜这是您输入的异步性质。

如果您的组件是展示组件，您可以将更改检测策略设置为onPush。

这样，您的变更检测器只会在您的输入中有新值时运行

例子：

@Component({
  selector: 'app-your-comp',
  templateUrl: './app-your-comp.component.html',
  styleUrls: ['./app-your-comp.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})