Question

我正在尝试在我的角度应用程序中的两个组件之间切换，我的目标是首先，当页面仍在加载时，将显示preloader，直到页面完全加载时，preloader变量将从true为false，则第二个组件将开始显示。

但是当我尝试时，出现了这个错误

错误错误：ExpressionChangedAfterItHasBeenCheckedError：检查表达式后，表达式已更改。先前的值：“ hidden：true”。当前值：“隐藏：假”。在viewDebugError

这是我的home.component.html代码

<app-preloader *ngIf="preloader; else Notpreloader"></app-preloader>

<ng-template #Notpreloader> 
    <div>
       ......
    </div>
</ng-template>

这是home.component.ts

的代码

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit, AfterViewInit, AfterContentChecked {  
  constructor(private changeDetector: ChangeDetectorRef) { }

  ngAfterContentChecked(): void {
    this.changeDetector.detectChanges();
  }

  preloader=true  
    ngAfterViewInit() {
        this.preloader=false
  }

  ngOnInit() { 
  }

}

我如何摆脱这个错误，并使它按照我想要的方式工作，以便在页面加载完成后，它将隐藏预加载器组件并加载该页面的主页？

Answer 1

如果您没有异步调用之类的东西，但是尝试一下，我不知道为什么不强制加载程序：

main.component.html

<div *ngIf="componentIsReady; else loadingPlaceholder">
   ....
</div>
<ng-template #loadingPlaceholder>
   ... 
</ng-template>

main.component.ts

export class MainComponent implements ngOnInit {
    ...
    componentIsReady = false;

    ngOnInit() {

        setTimeout(() => {
           this.componentIsReady = true;
        }, 500)
    }
}

注意：如果不起作用，您可以在 AppPreloaderComponent 上放置一个 @Output ，它将发出一个布尔值告诉父母他已经准备好了，那么您只需在父母（HomeComponent）上捕获该发出的事件（从您的AppPreloaderComponent子级）就可以了。

Answer 2

用settimeout将预加载器包装在ngAfterinit中。像这样

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

无法在成角度的

2 个答案: