Угловая 6 погрузочная панель с DialogBox

Question

Я использую angular с материалом, и я хочу, чтобы «mat-progress-bar» показывался, когда я нажимал «Add» в моем диалоговом окне. Я создал небольшое приложение для StackBlitz, которое может упроститьпонять1012 *

import {Component, Inject} from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';

export interface DialogData {
  animal: string;
  name: string;
}

@Component({
  selector: 'dialog-overview-example',
  templateUrl: 'dialog-overview-example.html',
  styleUrls: ['dialog-overview-example.css'],
})
export class DialogOverviewExample {

public LoadingCondition = false;

  animal: string;
  name: string;

  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: {name: this.name, animal: this.animal}
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      this.animal = result;
    });
  }

}

@Component({
  selector: 'dialog-overview-example-dialog',
  templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog {

  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData, private DialogOverviewExample : DialogOverviewExample) {}

  onNoClick(): void {
    this.dialogRef.close();
  }

  onAddClick() :void{
    this.DialogOverviewExample.LoadingCondition = true;
    //makes a call to my service
    //I want to start loading here
    //but does not work
    this.dialogRef.close();
  }

}

dialog-Overview-example-dialog.html

<h1 mat-dialog-title>Stuff to add</h1>
<div mat-dialog-content>
  <p>add what?</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No Click</button>
  <button mat-button (click)="onAddClick()" cdkFocusInitial>add</button>
</div>

TLDR;Когда я нажимаю 'onAddClick ()', панель загрузки не показывает

Answer 1

Пожалуйста, рассмотрите обработку операций, которые происходят сразу после закрытия диалогового окна в классе, из которого открылось диалоговое окно.

Другими словами, рассмотрите возможность обработки функциональности индикатора выполнения в компоненте, открывшем диалоговое окно.То, как вы это делаете, не работает, так как у вас нет экземпляра этого класса, и, следовательно, ваш код на самом деле не будет делать то, что вы думаете.

В любом случае, вы можете передатьнеобязательный результат либо с атрибутом matDialogClose в шаблоне вашего диалога, для которого задана строка, либо с помощью метода close ссылки на диалог с параметром, установленным в качестве результата.Затем вы можете обработать результат диалога через afterClosed, наблюдаемый из справочника диалога.

Вот пример:

<h2 matDialogTitle>Discard changes?</h2>
<mat-dialog-content>
  <p>Unsaved changes will be lost!</p>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button color="primary" matDialogClose="cancel">Cancel</button>
  <button mat-button color="primary" matDialogClose="discard">Discard changes</button>
</mat-dialog-actions>

export class MyComponent {
  constructor(private dialog: MatDialog) { }
  onDelete() {
    const dialogRef = this.dialog.open(DiscardChangesDialogComponent);
    dialogRef.afterClosed().subscribe(result => {
      // Note: If the user clicks outside the dialog, the result
      // will be returned as `undefined`
      if (result !== undefined) {
        // Note: If you set the attribute of `matDialogClose` to something
        // else, please modify the following if statement below to suit
        // your needs.
        if (result === 'cancel') {
          // TODO: Implement functionality here.
        } else if (result === 'discard') {
          // TODO: Implement functionality
        }
      }
    })
  }

---

Альтернативный метод (использование методов вместоатрибут matDialogClose):

ИМО, я предлагаю вам использовать первый метод, так как для этого требуется еще несколько строк для обработки кнопок в шаблоне диалога.

Использование matDialogCloseсвойство уменьшает количество строк, так как вам больше не нужно писать обработчики щелчков для кнопок в компоненте вашего диалога.

В любом случае, вот код:

Шаблон диалога:

<h2 matDialogTitle>Delete all conversations?</h2>
<mat-dialog-content>
  <p>This cannot be undone!</p>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button color="primary" (click)="onCancelClick()">Cancel</button>
  <button mat-button color="warn" (click)="onConfirmClick()">Confirm</button>

Компонент диалога:

export class MyDialogComponent {
  // ...
  constructor(private dialogRef: MatDialogRef<MyDialogComponent>) { }

  onCancelClick() {
    this.dialogRef.close('cancel');
  }
  onConfirmClick() {
    this.dialogRef.close('confirm');
  }
}

Компонент (который открывает диалоговое окно):

То же, что и в примере выше, за исключением замены discard на confirm в else if условие

---

Надеюсь, это поможет!