Question

我想在执行同步任务期间显示一个微调器。我在任务开始前设置showSpinner = true，在完成任务后设置showSpinner=false。然而，旋转器甚至没有显示。我认为这是因为昂贵的任务会阻止显示微调器的*nfIf="showSpinner的DOM更新。我该如何解决？我正在考虑使用生命周期钩子，但不知道如何。

updateImageData() {
    if (this.cropSizeChanged) {
        this.showSpinner = true;
        var imgData = this.cropper.getCroppedCanvas().toDataURL(); //**expensive**
        this.editedImage = imgData;
        this.cropSizeChanged = false;
        this.showSpinner = false;
    }
    console.log("updated imageData");
    if(this.isTaggableImage) {
        setTimeout(() => {this.croppedImageBoundingRect = this.croppedImageRef.nativeElement.getBoundingClientRect();}, 100);
    } 
}

Answer 1

您的微调器未显示的原因是您在拨打昂贵的电话后立即将其设置为假。现在你可以尝试以下两件事

如果昂贵的调用返回回调或承诺，那么它应该在回调中将其设置为false。通常在nagular中我们使用observable，因此设置this.showSpinner = false的位置将在subscribe中。
尝试以下代码

public updateImageData(){ this.showSpinner = true; urthing.expensiveCall() setTimeout()=>{ this.showSpinner = false; },3000); }

Answer 2

将承诺中的昂贵电话包含在承诺中，如此：

expensiveTask(): Promise<any> {
  return new Promise((resolve, reject) => {
    let imgData = this.cropper.getCroppedCanvas().toDataURL();
    resolve(imgData);
  }) 
}

然后然后在承诺解决后将剩下的逻辑放在其中：

updateImageData() {
  if (this.cropSizeChanged) {
      this.showSpinner = true;
      this.expensiveTask().then(imgData => {
          this.editedImage = imgData;
          this.cropSizeChanged = false;
          this.showSpinner = false;
      });
  }
  // ...
}

Answer 3

您的代码在浏览器中的单个线程上执行，因此当您设置showSpinne = true并运行同步操作时，浏览器在代码返回之前无法呈现任何内容。对于需要大量背景使用的网络工作者https://angular.io/guide/web-worker，这将释放浏览器UI线程，使其能够显示旋转的图标，并将计算在单独的工作者线程上的更改。

角度材料如何在同步密集型任务期间显示微调器

3 个答案: