Question

我想在进行某些处理时显示进度条叠加图。我可以计算完成百分比，因此我想使用确定的进度栏。对于覆盖部分，我想使用一个对话框。基本上，除了我不想要微调框外，我想做的事情完全{Angular 2 Material Progress Spinner: display as overlay）。所以我的组件看起来像：

模板：

.babelrc

组件：

<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() {}
}

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

我发现了这个（How to pass data to dialog of angular material 2），但似乎只用于构造函数注入，而不是绑定。

Answer 1

我在这里尝试过：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，以进行演示。

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

角材料2进度栏覆盖

1 个答案: