Angular仅在ngOnInit出现ExpressionChangedAfterItHasBeenCheckedError问题排查

我想要实现一个loginLoading可观察对象，让任意组件订阅它以判断用户是否正在登录，相关代码如下：

app.component.html #

<mat-toolbar [ngClass]="{'disable-pointer': loginLoading}">
    <a routerLink="login" routerLinkActive="active" id="login"> Login </a>
</mat-toolbar>

app.component.ts #

public loginLoading;
constructor(private authenticationService: AuthenticationService) {}

ngOnInit() {
    this.authenticationService.loginLoading.subscribe(loginLoading => {
        this.loginLoading = loginLoading;
    })
}

login.component.ts #

constructor(private authenticationService: AuthenticationService){}

ngOnInit(): void {
    this.authenticationService.loginLoading.subscribe(loginLoading => this.loginLoading = loginLoading)
    this.authenticationService.login().subscribe(
        data => {
            this.router.navigate([this.state]);
            console.log(`after:  ${this}`)
        },
        error => {
            this.loginFailed = true
            this.error = error.non_field_errors[0]
        });
}

AuthenticationService #

private loginLoadingSubject: BehaviorSubject<boolean>;
public loginLoading: Observable<boolean>;

constructor(private http: HttpClient) {
    this.loginLoadingSubject = new BehaviorSubject<boolean>(false);
    this.loginLoading = this.loginLoadingSubject.asObservable();
}

login() {
    this.loginLoadingSubject.next(true)
    return this.http.post<any>(`${environment.apiUrl}/login`, {....})
        .pipe(map(user => {
                // ...业务逻辑
                this.loginLoadingSubject.next(false)
                // ...业务逻辑
            }),
            catchError(error => {
                this.loginLoadingSubject.next(false)
                return throwError(error);
            }));
}

疑问点 #

• 为何Angular无法检测到AppComponent中loginLoading字段在this.loginLoading = loginLoading;这行的变化？这行代码难道不应该触发变更检测周期吗？
• 若将LoginComponent的ngOnInit中的代码移到构造函数中，错误就不会出现，这是否意味着Angular在构造函数之后、ngOnInit之前执行变更检测？
• 我通过在AppComponent的this.loginLoading = loginLoading;之后手动触发变更检测解决了问题，但更希望无需这么做，或至少了解必须手动触发的原因。

补充说明：我知道开发模式下Angular会额外做一次检查以确保模型未变化。我原本认为可观察对象发出新值会触发新的变更检测周期，因此不应出现错误。我的理解是，如果可观察对象在两次检查之间发出值（且其值绑定到视图），Angular不会知晓（也不会再次触发变更检测），因此第二次检查后会出现错误。

问题原因分析 #

1. 同步next()调用的时机冲突
   Angular的变更检测默认在事件循环tick结束后执行一次。你在LoginComponent的ngOnInit中同步调用login()，其中this.loginLoadingSubject.next(true)会在Angular首次变更检测执行前（同一tick内）更新AppComponent的loginLoading字段。开发模式下Angular会执行两次变更检测：第一次检测读取到初始值false，但同一tick内模型值已被同步更新为true，第二次检测时发现模型与视图值不一致，因此抛出“表达式变更检测后值已改变”的错误。

2. 构造函数与ngOnInit的执行顺序差异
   Angular组件的初始化顺序是：父组件构造函数 → 子组件构造函数 → 父组件ngOnInit → 子组件ngOnInit。当把login()移到LoginComponent的构造函数时，next(true)会在AppComponent的ngOnInit订阅之前发出，AppComponent不会收到这次值更新，自然不会触发变更检测冲突；而在ngOnInit中调用时，AppComponent已经完成订阅，会同步接收值更新，进而引发检测冲突。

3. 手动触发变更检测的原理
   手动调用changeDetectorRef.detectChanges()会强制Angular立即执行变更检测，同步将模型值更新到视图，让两次检测时的模型与视图值保持一致，从而避免错误。

最优解决方案 #

无需手动触发变更检测，推荐以下两种规范方式：

方式一：异步触发状态更新

将next(true)放入setTimeout中，让它进入下一个事件循环tick，确保Angular首次变更检测先完成，后续的状态更新会自动触发新的变更检测：

login() {
    setTimeout(() => this.loginLoadingSubject.next(true));
    return this.http.post<any>(`${environment.apiUrl}/login`, {....})
        .pipe(
            map(user => {
                this.loginLoadingSubject.next(false);
                // ...业务逻辑
            }),
            catchError(error => {
                this.loginLoadingSubject.next(false);
                return throwError(error);
            })
        );
}

方式二：使用async管道（推荐）

在模板中直接使用async管道订阅Observable，Angular会自动管理订阅生命周期并触发变更检测，无需手动订阅赋值：

// app.component.ts
public get loginLoading$() {
    return this.authenticationService.loginLoading;
}

<mat-toolbar [ngClass]="{'disable-pointer': loginLoading$ | async}">
    <a routerLink="login" routerLinkActive="active" id="login"> Login </a>
</mat-toolbar>

内容的提问来源于stack exchange，提问作者Mohamed Kemega