Angular 显示加载程序直到组件完全加载数据

Question

我需要加载一个 css 加载程序，直到组件完全加载。所以我刚刚在组件 class 中创建了一个变量，并在 ngOnInit 生命周期中将其初始化为 true。然后我在 ngAfterViewInit 生命周期中将 varibale 更改为 false。

但它一直让我出错 ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.

componentLoading: boolean;

ngOnInit() {
  this.componentLoading = true;
}

ngAfterViewInit() {
  this.componentLoading = false;
}

我在一些问题中看到了相同的错误，但无法完全理解如何实现它。

stackblitz 中构造的错误 https://angular-7stwmm.stackblitz.io

Answer 1

在我给你解决方案之前，首先了解错误ExpressionChangedAfterItHasBeenCheckedError是什么意思。

通常，angular 有一个叫做 ChangeDetectionStartegy 的东西。它负责检测 property/variable 值的任何变化。只有通过这种机制，我们才能看到我们的 typescript 变量所做的更改反映在我们的 Html 页面上。您可以阅读 in-depth 关于它 here。

现在，在开发过程中，这个过程是运行每次更改两次（在生产模式下只有一次）。一个用于检测更改，第二个用于验证更改。它发生在 millisecond/nanosecond。在这 2 个步骤中，如果 variable/property 更改其值，则 angular 将抛出此警告。 这就是你的情况。 有多种方法可以解决这个问题：

使用 setTimeout（更简单但不推荐）。


    ngAfterViewInit() {
     setTimeout(() => {
     this.componentLoading = false;
    });
    }

使用自定义逻辑：

一个。从上一个组件启动加载器。
b.在当前组件的构造函数中停止加载程序。要么如果你的组件需要来自服务的数据，那么在 observables success/error 事件之后停止它。

Angular 显示加载程序直到组件完全加载数据

Angular showing loader till component fully loads with data

angular

angular7