Angular 8 上的 ExpressionChangedAfterItHasBeenCheckedError 和在 ngOnInit 上调用的方法

Question

我在 Angular 模板上遇到了一些常见问题，我的所有页面都有这个通用模板，在它里面我有一个 *ngIf，里面有一个微调器，另一个有我的路由器插座。

拦截器控制微调器的行为和可见性，因此出现错误，在特定组件中，我订阅了 ngOnInit 上的 http 方法，结果就是错误。

如果我在生命周期方法上调用某些方法，则会发生此错误。我已经尝试了一些解决方法，例如将 setSpinnerState 与 setTimeout 结合起来，并尝试使用其他生命周期挂钩（AfterViewInit、AfterContentInit...）。

拦截器

export class InterceptorService implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): import('rxjs').Observable<HttpEvent<any>> {
    this.layoutService.setSpinnerState(true);
    return next.handle(this.handlerRequest(req)).pipe(
      delay(3000),
      finalize(() => {
        this.layoutService.setSpinnerState(false);
      })
    );
  }

  constructor(private authService: AuthService, private layoutService: LayoutService) { }

  private handlerRequest(req: HttpRequest<any>) {
    let request;
    if (this.authService.isLoggedIn() && !req.url.includes('/assets/i18n/')) {
      request = req.clone({
        url: environment.api.invokeUrl + req.url,
        headers: req.headers.append('Authorization', 'Bearer ' + this.authService.getAcessToken())
      });
    } else if (req.url.includes('/assets/i18n/')) {
      request = req.clone();
    } else {
      request = req.clone({
        url: environment.api.invokeUrl + req.url
      });
    }
    return request;
  }

}

布局服务：

export class LayoutService {

  private isSpinner: boolean = true;

  constructor() { }

  public setSpinnerState(state: boolean): void {
    this.isSpinner = state;
  }

  public getSpinnerState():boolean{
    return this.isSpinner;
  }


}

通用模板（LayoutComponent）

<div class="page-wrapper fixed-nav-layout">
    <app-header (toggleEvent)="receiveToggle($event)"></app-header>
    <!--Page Body Start-->
    <div class="container-fluid">
        <div class="page-body-wrapper sidebar-icon" [class.sidebar-close]="toggle">
            <app-sidebar class="page-sidebar page-sidebar-open"></app-sidebar>
            <div class="page-body p-t-10">
                <app-breadcrumb></app-breadcrumb>
                <router-outlet  *ngIf="!layoutService.getSpinnerState()"></router-outlet>
                <div class="loader-box d-flex justify-content-center align-self-center" *ngIf="layoutService.getSpinnerState()" async>
                    <div class="loader">
                        <div class="line bg-default"></div>
                        <div class="line bg-default"></div>
                        <div class="line bg-default"></div>
                        <div class="line bg-default"></div>
                    </div>
                </div>
            </div>
        </div>
        <!--Page Body End-->
    </div>

带有 subscribe 方法的组件

export class EditProfileComponent implements OnInit {

  public userProfile = new UserProfile();

  constructor(private userService: UserService) {
  }

  ngOnInit() {
    this.getUser();
  }

  public getUser() {
    // debugger
    this.userService.getUser().subscribe(data => {
      this.userProfile = Amazon.feedUser(data);
    }, err => {
      return new ErrorHandler().show(err.message);
    });
  }
}

和错误堆栈

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: true'. Current value: 'ngIf: false'.
    at viewDebugError (core.js:28792)
    at expressionChangedAfterItHasBeenCheckedError (core.js:28769)
    at checkBindingNoChanges (core.js:29757)
    at checkNoChangesNodeInline (core.js:44442)
    at checkNoChangesNode (core.js:44415)
    at debugCheckNoChangesNode (core.js:45376)
    at debugCheckDirectivesFn (core.js:45273)
    at Object.eval [as updateDirectives] (LayoutsComponent.html:10)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:45258)
    at checkNoChangesView (core.js:44248)

最后我在 LayoutComponent 上尝试了 ChangeDetectorRef，但错误没有改变。

export class LayoutsComponent implements OnChanges {

  public toggle;
  openToggle: boolean;

  constructor(public navService: NavService, public layoutService: LayoutService, private cd: ChangeDetectorRef) {
    if (this.navService.openToggle === true) {
      this.openToggle = !this.openToggle;
      this.toggle = this.openToggle;
    }
  }

  ngOnChanges(): void {
    this.cd.detectChanges();
  }

  receiveToggle($event) {
    this.openToggle = $event;
    this.toggle = this.openToggle;
  }

}

stackblitz 上重现的错误：https ://stackblitz.com/edit/angular-xylo9

Answer 1

原始堆栈闪电战*

ExpressionChangedAfterItHasBeenCheckedError是一项开发检查，以确保绑定以 Angular 期望的方式更新。运行时变更检测的顺序如下：

1. OnInit、DoCheck、OnChanges
2. 渲染
3. 更改检测在子视图上运行
4. AfterViewChecked, AfterViewInit

最终的开发检查确保检查后没有任何更改（否则所有子项都需要更新）。

问题是layoutService.getSpinnerState()在父母确定并“呈现”之后，孩子会改变它。

Stackblitz - 一个解决方案

你的问题归结为

1. 你应该打电话给哪里getUser()？

   为了简单起见，我在AppComponent 中调用了它。

   如果您在EditProfileComponent OnInit 中调用它，这将触发无限循环。

   spinner 为 false，Parent 渲染 Child，Child 调用getUser()，spinner 设置为 true，Parent 移除 Child 并使用 http 响应我们重复。

2. 如何将数据传递给EditProfileComponent？

   为简单起见，我创建了一个PassDataService来保存数据，然后将其传递给EditProfileComponent OnInit。

替代方案包括使用守卫或解析器或允许EditProfileComponent渲染但让微调器覆盖它直到 http 响应。

单向数据流

应用组件 ? 使用保存在服务中的数据调用 getUser() ？将 spinnerState 设置为 true ？渲染微调器

接收数据时：

拦截器？将 spinnerState 设置为 false ？呈现路由器插座？呈现 EditProfileComponent ？从服务传递的数据

_{*这与原始 stackblitz 相同，但添加了日志记录以提供更改检测和生命周期挂钩的概念，并将模板放在 ts 文件中以便于分析。}