Question

我尝试在我的应用中的每个output_com操作上添加加载微调器。

这是我的http.get：

http.get

protected get(url: string): any { //Loading start this.sessionService.showLoader(); (...) }致电SessionService：

LoadingService

这是我的服务constructor(private cookieService: CookieService, private loadingService : LoadingService) { } public showLoader(): void { this.loadingService.show(); } public hideLoader(): void { this.loadingService.hide(); }

LoadingService

然后，这是我的主要布局组件的一部分：

import { Injectable, OnInit, EventEmitter } from '@angular/core';

@Injectable()
export class LoadingService implements OnInit {


  public loadingEvent: EventEmitter<boolean>;


  constructor() {
    this.loadingEvent = new EventEmitter();
  }

  ngOnInit() {
    this.loadingEvent.emit(false);
  }


  show() {
    this.loadingEvent.emit(true);

  }

  hide() {
    this.loadingEvent.emit(false);
  }

}

最后，在我的Html布局模板中：

  showLoadingDiv : boolean;

  constructor(public loadingService : LoadingService) { 
  }

  ngOnInit() {

  }


  ngAfterViewInit(){
    this.loadingService.loadingEvent.subscribe((res) => { 
      this.showLoadingDiv = res;
    });
  }

当其他模块加载速度很快时，我没有错误<div class="loaddiv" *ngIf="showLoadingDiv"> Loading... </div>但是如果模块花了一点时间（因为数据太大），我就会遇到这个错误。

我已经看到了这个但不适合我： https://stackoverflow.com/a/38846793/1729211

Answer 1

更改ngAfterViewInit生命周期挂钩中的值时发生错误。修复它的快速方法是将代码包装在setTimeout（）中的.subscribe中。有一篇很好的文章深入解释了这一点，但我在手机上找不到它，也许其他人可以发布它。

加载服务时ExpressionChangedAfterItHasBeenCheckedError

1 个答案: