angular - 在 Electron 中关闭MatDialogRef

Question

我正在开发通过Electron 2.0.5编译的Angular 5应用程序。我正在使用MatDialogRef来获取用户输入(Yes或No)，并使用响应来控制一些业务逻辑。显示MatDialogRef后，我无法关闭它。

对话框的HTML引用:confirm.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>

逻辑:confirm.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()方法被命中。该对话框不会关闭，并且没有控制台错误。如何关闭垫对话框引用？

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