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

在电子中关闭MatDialogRef

1 个答案: