角度材料2进度条覆盖

Question

我想在进行某些处理时显示一个进度条覆盖图。我可以计算完成百分比，所以我想使用一个确定的进度条。对于覆盖部分，我想使用一个对话框。基本上，我想做这里要做的事情（Angular 2 Material Progress微调器：显示为叠加），但我不需要微调器。因此，我的组件将如下所示：

模板：

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

元件：

import {Component, Input} from '@angular/core';
@Component({
  selector: 'progress-bar',
  templateUrl: 'progress-bar.html'
})
export class ProgressBarComponent {
  @Input() percent: number;
  constructor() {}
}

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

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]);
}

我发现了这一点(如何将数据传递到angular material 2的对话框),但它似乎只是用于构造函数注入，而不是绑定。

Answer 1

我在这里试了一下:https://stack blitz . com/edit/angular 7-material-primeng-template-B4 DVS 8

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

 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。