Угловой материал 2 Наложение индикатора выполнения

Question

Я хочу показать оверлей Progress Bar, пока происходит некоторая обработка.Я могу рассчитать процент выполнения, поэтому я хочу использовать определенный индикатор выполнения.Для оверлейной части я хочу использовать диалог.По сути, я хочу сделать именно то, что здесь делается ( Angular 2 Material Progress Spinner: отображать как оверлей ), за исключением того, что я не хочу 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?

Я нашел это ( Как передать данные в диалог углового материала 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 для демонстрации.

Также вы можете использовать общий сервис для передачи значения.