角度通用装载机组件

Question

我在我的angular 6应用程序中实现了加载程序组件代码。 请在下面找到html，组件，css代码 html代码

 <div [class.hidden]="!show">
      <div class="loader-overlay">
        <div *ngIf="show" class="loader"></div>
      </div>
    </div>

component.ts代码

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { LoaderService, LoaderState } from './loader.service';

@Component({
  selector: 'app-main-loader',
  templateUrl: './loader.component.html',
  styleUrls: ['./loader.component.css']
})
export class LoaderComponent implements OnInit, OnDestroy {
  show = false;
  private subscription: Subscription;
  constructor(private loaderService: LoaderService) { }
  ngOnInit() {
    this.subscription = this.loaderService.loaderState
    .subscribe((state: LoaderState) => {
      this.show = state.show;
    });
  }
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

但是当我使用它时，它在chrome控制台中显示以下错误代码，请帮助我解决该问题

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: false'. Current value: 'ngIf: true'.
    at viewDebugError (core.js:7594)
    at expressionChangedAfterItHasBeenCheckedError (core.js:7582)
    at checkBindingNoChanges (core.js:7684)
    at checkNoChangesNodeInline (core.js:10545)
    at checkNoChangesNode (core.js:10534)
    at debugCheckNoChangesNode (core.js:11137)
    at debugCheckDirectivesFn (core.js:11065)
    at Object.eval [as updateDirectives] (LoaderComponent.html:3)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:11054)
    at checkNoChangesView (core.js:10433)

请在下面的图片中找到

Answer 1

尝试将ngOnInit更改为ngAfterViewInit

ngAfterViewInit() {
    this.subscription = this.loaderService.loaderState
    .subscribe((state: LoaderState) => {
      this.show = state.show;
    });
  }Ï