angular - 异步调用后，在角度 4 中调用 changeDetectorRef 停止工作

Question

我在一个角度组件中有以下代码，它是文件上传进度事件的事件处理程序：

progressEvent(evt: TransferProgressEvent) {
  const percentage = evt.loadedBytes === 0 ? 0 : Math.ceil((evt.loadedBytes / this.control.controls.file.size) * 100);

  this.control.controls.progress.setValue(`${evt.loadedBytes}%`);

  this._changeDetectorRef.detectChanges();
}

我正在使用onPush变更检测，我注意到一些奇怪的行为。

事件处理程序被调用，但进度没有更新。

在调试这个时，我注意到一旦我调用了一个async函数，this._changeDetectorRef.detectChanges();就不再工作了。

此代码演示了这一点：

async upload(file: FileToUpload, options?: IUploadToBlockBlobOptions): Promise<UploadResponse> {
  const blobName = file.blobName;

  // THIS WILL CAUSE THE PROGRESS TO BE UPDATED
  file.progressEvent({ loadedBytes: 50 });

  const blockBlobURL = await this.getSasUrl(blobName);

  // NO UPDATE WILL HAPPEN AFTER ASYNC CALL
  file.progressEvent({ loadedBytes: 100 });
}

我是角度的新手，我怀疑这与角度区域有关。

谁能告诉我这里发生了什么？

标签： angular