angular - 在浏览器上关闭 Angular Material 对话框

Question

我正在使用 Angular Material (5.0.0) 为移动设备创建单页 Web 应用程序。当我需要显示对话框时，我有一个场景。我想允许用户回击以关闭对话框，因为这在移动设备(尤其是 Android)上是一种非常常见的行为。

当前发生这种情况时，页面会转到上一页。相反，我需要按钮来简单地关闭对话框。

关于如何实现这一点有什么想法吗？？

Answer 1

这个选项已经可用

let dialogRef = dialog.open(DialogExample, {
  height: '400px',
  width: '600px',
  closeOnNavigation: true
});

使用路由更改事件的其他方式:

<强>1。来自应用组件

  constructor(router: Router, matDialog: MatDialog) {

    // Close any opened dialog when route changes
    router.events.pipe(
      filter((event: RouterEvent) => event instanceof NavigationStart),
      tap(() => this.matDialog.closeAll())
    ).subscribe();
  }

<强>2。来自对话框组件

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

  constructor(
    public dialogRef: MatDialogRef<ExampleDialog>,
    router: Router
  ) {

    // Close dialog ref on route changes
    router.events.pipe(
      filter((event: RouterEvent) => event instanceof NavigationStart),
      tap(() => this.dialogRef.close()),
      take(1),
    ).subscribe();
  }

}