Закрытие MatDialogRef в электронном

Question

Я работаю над приложением Angular 5, скомпилированным с помощью Electron 2.0.5. Я использую MatDialogRef для получения пользовательского ввода (Yes или No) и использую ответ для управления некоторой бизнес-логикой. После отображения MatDialogRef я не могу заставить его закрыться.

HTML-код диалогового окна ref: verify.component.html

<div class="confirm">
  <h1 mat-dialog-title>Confirm</h1>

  <div mat-dialog-content>
    {{dialogData.message}}
  </div>

  <div mat-dialog-actions>
    <button mat-button [mat-dialog-close]="'cancel'" (click)="close()">No</button>
    <button mat-button [mat-dialog-close]="'yes'" cdkFocusInitial (click)="close()">Yes</button>
  </div>

</div>

Логика: verify.component.ts

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

@Component({
  selector: 'app-confirm',
  templateUrl: './confirm.component.html',
  styleUrls: ['./confirm.component.scss']
})
export class ConfirmComponent implements OnInit {

  dialogData: any;

  constructor(private dialogRef: MatDialogRef<ConfirmComponent>,
    @Inject(MAT_DIALOG_DATA) private data: any) {
      this.dialogData = data;
    }

  ngOnInit() {
  }

  close() {
    this.dialogRef.close();
  }

}

И, наконец, в моих app.ts:

...
    const dialogRef = this.matDialog.open(ConfirmComponent, {
        data: {
            message: 'Yes or No?'
        }
    });

    return dialogRef.afterClosed()
        .switchMap(result => {
            if (result !== 'cancel') {
                // Do something
            } else {
                // Do something
            }
        });
...

При отладке приложения через VSCode я могу подтвердить, что метод close () используется. Диалог не закрывается и нет ошибок консоли. Как я могу закрыть диалоговое окно циновки ref?

Answer 1

Кажется, в вашем коде отсутствует подписка:

dialogRef.afterClosed().subscribe(result => {
  console.log(`Dialog result: ${result}`);
});

Замените switchMap на subscribe

См. Пример документации здесь: https://material.angular.io/components/dialog/overview#dialog-content

---

Кстати, вы можете использовать эту альтернативу без директивы mat-dialog-close:

См. https://blog.angular -university.io / angular-material-dialog / (Шаг5)

Вы можете передать измененные данные формы обратно в AppComponent следующим образом:

  <div mat-dialog-actions>
    <button mat-button (click)="close(false)">No</button>
    <button mat-button (click)="close(true)">Yes</button>
  </div>

и

  close(clickResult: boolean): void {
    this.matDialogRef.close(clickResult);
  }

Теперь вы можете получать данные диалога вследующим образом:

dialogRef.afterClosed().subscribe(
    data => console.log("Dialog output:", data)
);