时间戳

首页 > 解决方案 > Angular Material 2 进度条叠加层

angular - Angular Material 2 进度条叠加层

问题描述

我想在进行一些处理时显示进度条覆盖。我可以计算完成百分比，所以我想使用确定的进度条。对于覆盖部分，我想使用一个对话框。基本上，我想做的正是这里所做的（Angular 2 Material Progress Spinner: display as overlay），除了我不想要一个 Spinner。所以我的组件看起来像：

模板：

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

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

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

标签： angularangular-material

解决方案

我在这里试了一下：https ://stackblitz.com/edit/angular7-material-primeng-template-b4dvs8

思路还是使用构造函数注入，但是传递的值是对对象的引用，而不是静态值。你在你的主要组件中定义一个百分比对象：

 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 以用于演示目的。

您也可以使用通用服务来传递值。

推荐阅读