角度显示加载程序，直到组件完全加载数据

Question

我需要加载一个CSS加载器，直到组件完全加载。 因此，我只是在组件类中创建了一个变量，并在ngOnInit liefcycle中将其初始化为true。然后，我在ngAfterViewInit生命周期中将varibale更改为false。

但它不断使我收到ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.的错误

componentLoading: boolean;

ngOnInit() {
  this.componentLoading = true;
}

ngAfterViewInit() {
  this.componentLoading = false;
}

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

stackblitz中构造的错误 fragment_individual

Answer 1

在为您提供解决方案之前，请先了解错误 ExpressionChangedAfterItHasBeenCheckedError 的含义。

通常，角度有一个叫做 ChangeDetectionStartegy 的东西。它负责检测属性/变量值的任何变化。仅通过这种机制，我们才能在Html页面上看到对打字稿变量所做的更改。您可以深入了解它here。

现在，在开发过程中，此过程每次更改都会运行两次（在生产模式下仅运行一次）。一种用于检测更改，第二种用于验证更改。它以毫秒/纳秒为单位发生。在这两个步骤中，如果变量/属性更改其值，则angular将抛出此警告。 您的情况就是这种情况。有多种方法可以解决此问题：

1. 使用setTimeout （更方便，但不推荐）。

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

1. 使用自定义逻辑：

   a。从上一个组件启动加载程序。
   b。在当前组件的构造函数中停止加载程序。                   要么 如果您的组件需要从服务中获取数据，请在可观察到的成功/错误事件后停止它。