Angular 9：移除加载DOM元素时规避ExpressionChanged错误的方案咨询

我来帮你搞定这个问题～先理清楚两种写法的问题根源：

• 用BehaviorSubject时，模板里的*ngIf="loading"没有通过async管道订阅这个数据流，所以模板始终拿到的是初始的true，div自然不会消失；
• 用普通boolean变量时，ngAfterViewInit是在Angular第一次变更检测完成后执行的，此时直接修改绑定变量会触发框架的变更检测校验逻辑，导致那个报错——虽然div能消失，但报错会影响自动化测试的稳定性。

下面给你几个既能移除div又不会触发报错的可行方案：

方案一：规范使用BehaviorSubject + async管道（推荐） #

这是最符合Angular响应式编程风格的做法，能从根源上避免问题：

1. 修改模板，给loading加上async管道，让模板自动订阅数据流：

<div *ngIf="loading | async" class="navbar-loading"></div>

2. 组件代码保持你的原有写法即可：

import { BehaviorSubject, Subject } from 'rxjs';

// ...
public loading: Subject<boolean> = new BehaviorSubject(true); 

public ngAfterViewInit() {
  this.loading.next(false);
}

当你调用next(false)时，async管道会把最新值同步到模板，div会正常消失，而且完全不会触发变更检测报错。

方案二：用setTimeout延迟修改普通变量 #

如果你不想用Observable，这个简单的方法也能快速解决问题：

public loading: boolean = true; 

public ngAfterViewInit() {
  setTimeout(() => {
    this.loading = false;
  }, 0);
}

setTimeout会把变量修改逻辑放到下一个宏任务队列，避开Angular的首次变更检测循环，框架就不会检测到"检测后意外变更"的情况，div能正常消失，也不会报错。

方案三：手动触发变更检测 #

通过ChangeDetectorRef主动告诉Angular执行变更检测，消除报错：

1. 先导入并注入ChangeDetectorRef：

import { ChangeDetectorRef, AfterViewInit } from '@angular/core';

// ...
constructor(private cdr: ChangeDetectorRef) {}

2. 修改ngAfterViewInit的逻辑：

public loading: boolean = true; 

public ngAfterViewInit() {
  this.loading = false;
  this.cdr.detectChanges(); // 手动触发一次变更检测
}

修改变量后主动调用detectChanges()，Angular会重新执行变更检测并确认变量的变更，不会再抛出那个错误。

这三个方案都能满足你的自动化测试需求——div会正确消失，同时控制台不会有报错。其中方案一最推荐，因为它遵循了Angular的设计理念，也更利于后续代码的维护。

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