角度加載按鈕ExpressionChangedAfterItHaHasBeenCheckedError

Question

我有我在應用程序中使用的組件，並且在大多數情況下都可以正常工作。 ts文件看起來像這樣：

import { Component, Input, OnInit, OnChanges } from '@angular/core';
import { Router } from '@angular/router';

import { LoadingService } from '@pyb-services/loading.service';

@Component({
  selector: 'pyb-loading-button',
  templateUrl: './loading-button.component.html',
  styleUrls: ['./loading-button.component.scss']
})
export class LoadingButtonComponent implements OnInit, OnChanges {
  @Input() link: any[] = []
  @Input() target: string
  @Input() navigateAfter: boolean
  clicked: boolean = false
  loading: boolean = false; // Has to be false by default, because sometimes everything has loaded before this button has come on the page

  constructor(
    private router: Router,
    private loadingService: LoadingService
  ) {
  }

  ngOnInit() {
    this.loadingService.onLoadingChanged.subscribe(isLoading => this.loading = isLoading);
  }

  ngOnChanges() {
    this.navigateWhen();
  }

  click(): void {
    this.clicked = !this.clicked;
    this.navigateWhen();
  }

  private navigateWhen(): void {
    if ((!this.loading || this.navigateAfter) && this.clicked && this.link.length) {
      this.router.navigate(this.link); 

      this.clicked = false;
    }
  }
}

模板文件如下所示：

<button class="btn btn-xl btn-secondary" type="button" [disabled]="loading && !navigateAfter" (click)="click()" [scrollTo]="target"
  offset="10" [ngSwitch]="loading">
  <span class="spinner" *ngSwitchCase="true">
    <span class="bounce1"></span>
    <span class="bounce2"></span>
    <span class="bounce3"></span>
  </span>
  <span *ngSwitchDefault>Next step</span>
</button>

就像我說的那樣，它似乎工作正常。 但是，如果另一個進程啟動了http請求，那么我會收到錯誤消息：

ExpressionChangedAfterItHasBeenCheckedError：表達式在檢查后已更改。 先前的值：'ngSwitch：false'。 當前值：'ngSwitch：true'。

抱怨在加載按鈕組件中更改了loading屬性。 有誰知道我該如何解決？

Answer 1

這是在觸發變更檢測時正在更改的變量loading的問題。 為避免此錯誤，請在單獨的線程中設置loading值。

  ngOnInit() {
    this.loadingService.onLoadingChanged.subscribe(isLoading => 
       Promise.resolve(null).then(() => this.loading = isLoading)
    );
  }