Angular 角材质2进度条叠加

我想在进行某些处理时显示进度条覆盖图。我可以计算完成百分比，所以我想使用一个确定的进度条。对于覆盖部分，我想使用一个对话框。基本上，我想做这里要做的事情，除了我不想要一个旋转器。因此，我的组件将如下所示：

模板：

<mat-progress-bar mode="determinate" [value]="percent"></mat-progress-bar>

然后我使用这个组件的代码如下：

const dialogRef: MatDialogRef<ProgressBarComponent> = this.dialog.open(ProgressBarComponent, {
  panelClass: 'transparent',
  disableClose: true
});

for (let i = 0; i < this.thingsToProcess.length; i++) {
  percentDone = i / this.thingsToProcess.length;
  // todo: Update dialogRef.ProgressBarComponent.percent
  await this.myService.doProcessing(this.thingsToProcess[i]);
}

我的问题是如何绑定ProgressBarComponent类上的百分比值

我发现了这个，但它似乎只是用于构造函数注入，而不是绑定。

我在这里尝试了一下：

该思想仍然使用构造函数注入，但传递的值是对对象的引用，而不是静态值。 在主组件中定义百分比对象：

 percent = {percent: 10};

将其传递到对话框，如下所示：

this.dialog.open(ProgressbarComponent, {
      panelClass: 'transparent',
      disableClose: true,
      data:{percent: this.percent}
    });

然后可以绑定到此输入对象，如下所示：

<mat-progress-bar mode="determinate" [value]="data.percent.percent"></mat-progress-bar>

在主组件中，您可以修改该值，该值将反映在进度栏中。为了演示，我设置了一个计时器，将进度条的值从10更改为50

还可以使用公共服务传递值

<mat-progress-bar mode="determinate" [value]="data.percent.percent"></mat-progress-bar>