时间戳

首页 > 解决方案 > 无法在角度组件之间切换

angularjs - 无法在角度组件之间切换

问题描述

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

但是当我尝试它时，我得到了这个错误

ERROR 错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：'隐藏：真'。当前值：“隐藏：假”。在 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() { 
  }

}

我怎样才能摆脱这个错误，让它按照我想要的方式工作，这样当页面完成加载时，它将隐藏预加载器组件并加载该页面的主页？

标签： angularjsangular

解决方案

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

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

推荐阅读