在浏览器后面关闭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();
  }

}

Answer 2

关于下面的解决方案，我受到了@valeriy-katkov答案的启发，进行了改进和简化。

1.配置对话框在导航时不关闭

关闭导航

this.dialog.open(Component, {
      ...
      closeOnNavigation: false
    });

2. 将CanActivateChild Guard 添加到根路由。

路由配置：

const rootRoutes: Routes = [{
    path: '',
    canActivateChild: [ CanActivateChildGuard ],
    children: [
        ...
    ]
}];

3. 如果打开了对话框，守卫将取消浏览器返回上的导航，并关闭对话框。

简单的守卫：

export class CanActivateChildGuard implements CanActivateChild {
    constructor(private dialog: MatDialog) {}

    canActivateChild(): boolean {
        if (this.dialog.openDialogs.length > 0) {
            this.dialog.closeAll();
            return false;
        } else {
            return true;
        }
    }
}

Answer 3

作为一种解决方法，您可以将CanActivateChild 防护添加到根路由。如果对话框打开并关闭对话框，守卫将取消导航。

路由配置：

const rootRoutes: Routes = [{
    path: '',
    canActivateChild: [ CanActivateChildGuard ],
    children: [
        ...
    ]
}];

还有守卫：

export class CanActivateChildGuard implements CanActivateChild {
    constructor(
        private readonly router: Router,
        private readonly location: Location
    ) {}

    canActivateChild(route: ActivatedRouteSnapshot): boolean {
        if (this.dialog.openDialogs.length > 0) {
            // fix navigation history, see github issue for more details
            // https://github.com/angular/angular/issues/13586
            const currentUrlTree = this.router.createUrlTree([], route);
            const currentUrl = currentUrlTree.toString();
            this.location.go(currentUrl);

            this.dialog.closeAll();
            return false;
        } else {
            return true;
        }
    }
}

Answer 4

您可以注入MatDialog服务并调用closeAll方法来关闭所有打开的对话框，如下所示，

constructor(public dialog: MatDialog) {
         this.dialog.closeAll();
}

现场演示