角度加载按钮 ExpressionChangedAfterItHasBeenCheckedError

debugcn 发表于 Dev

r3plica

我在我的应用程序中使用了这个组件，并且在大多数情况下它运行良好。它的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属性变化。有谁知道我该如何解决这个问题？

苏尼尔·辛格

这是在loading触发更改检测时正在更改的变量的问题。为避免此错误，请loading在单独的线程中设置的值。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。