如何异步订阅candeactivate guard的matdialog服务？

Question

我已经使用 angular 表单验证实现了 candeactivate guard。如果用户单击 ngForm 字段。并尝试导航到不同的选项卡，用户将获得自定义确认弹出窗口，其中会显示 "Discard Changes ? " 和 returns true 或 false。

这是我的守卫

import { NgForm } from "@angular/forms";
import { ComponentCanDeactivate } from './component-can-deactivate';

export abstract class FormCanDeactivate extends ComponentCanDeactivate {

abstract get form(): NgForm;

canDeactivate(): boolean {
    return this.form.submitted || !this.form.dirty;
}
}

组件守卫

import { HostListener } from "@angular/core";

export abstract class ComponentCanDeactivate {

abstract canDeactivate(): boolean;

@HostListener('window:beforeunload', ['$event'])
unloadNotification($event: any) {
    if (!this.canDeactivate()) {
        $event.returnValue = true;
    }
}
}

现在这是我的确认弹出窗口代码。我的问题是，如果我使用默认的 confirm() 方法（下面代码中的注释行），它会弹出 windows 并询问是或否，这非常有效。但是如果我在这里使用 Custom Material Popup，我必须订阅异步执行的 afterclosed() 方法，而我必须等到此方法执行后再继续。我怎样才能做到这一点？

import { Injectable } from '@angular/core';
import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { MatMenuTrigger, MatDialog } from '@angular/material';
import { Observable } from 'rxjs/Observable';
import { ComponentCanDeactivate } from './component-can-deactivate';
import { ConfirmationComponent } from 'src/app/core/modals/confirmation/confirmation.component';


@Injectable()
export class CanDeactivateGuard implements CanDeactivate<ComponentCanDeactivate> {

    constructor(private modalService: MatDialog) {

    }

canDeactivate(component: ComponentCanDeactivate): boolean {

    if (!component.canDeactivate()) {
        // return confirm('You have unsaved changes! If you leave, your changes will be lost');

        const dialogRef = this.modalService.open(ConfirmationComponent, {});
        dialogRef.afterClosed().subscribe(res => {
            if (res == 'OK') {
                return true;
            } else {
                return false;
            }
        });
    }
        return true;
    }
}

我从模态返回 'OK' 如下

constructor(private dialogRef: MatDialogRef<ConfirmationComponent>) { }

btnOk() {
   this.dialogRef.close('OK');

}

感谢任何帮助。

编辑：

我在我的组件中扩展了 formdeactivate

export class EditFormComponent extends FormCanDeactivate implements OnInit {

@ViewChild('form', { static: true }) form: NgForm;

constructor(){super();}
}

Stackblitz Link :https://angular-custom-popup-candeactivate.stackblitz.io

Answer 1

你的问题

您需要一种可重复使用的方式在用户离开包含脏表单的组件之前提示用户。

要求：

表格是否干净无提示
如果用户想退出，导航将继续
如果用户不想退出，导航将被取消

您现有的解决方案

在我花一点时间了解您的解决方案后，我发现这是一种处理多个组件的优雅方式。

你的设计大概是这样的：

export abstract class ComponentCanDeactive {
  abstract canDeactivate(): boolean;
}

export abstract class FormCanDeactivate extends ComponentCanDeactivate {
  abstract get form(): NgForm;

  canDeactivate(): boolean {
    return this.form.submitted || !this.form.dirty;
  }
}

如果你想将它应用到一个组件，你只需扩展 FormCanDeactivate class.

你使用 Angular CanDeactivate 路由守卫来实现它。

export class CanDeactivateGuard implements CanDeactivate<ComponentCanDeactivate> {
  canDeactivate(component: ComponentCanDeactivate): boolean {
    return component.canDeactivate();
  }
}

您将其添加到路由中的相关路由中。我假设您了解所有这些是如何工作的，因为您为其提供了代码和演示。

如果你只是想在组件有脏表单时防止路由停用，你已经解决了这个问题。

使用对话框

您现在想要在用户离开脏表单之前给他们一个选择。您使用同步 javascript confirm 实现了此功能，但您想使用异步的 Angular Material 对话框。

解决方案

首先，由于您要异步使用它，因此您需要 return 从您的守卫那里获得一个异步类型。您可以 return Promise 或 Observable。 Angular Material 对话框 return 是一个 Observable，所以我将使用它。

现在只需设置对话框并return使用可观察的关闭函数即可。

停用-guard.ts

constructor(private modalService: MatDialog) {}

canDeactivate(component: ComponentCanDeactivate):  Observable<boolean> {
  // component doesn't require a dialog - return observable true
  if (component.canDeactivate()) {
    return of(true);
  }

  // set up the dialog
  const dialogRef = this.modalService.open(YesNoComponent, {
    width: '600px',
    height: '250px', 
  });

  // return the observable from the dialog  
  return dialogRef.afterClosed().pipe(
    // map the dialog result to a true/false indicating whether
    // the route can deactivate
    map(result => result === true)
  );    
}

其中 YesNoComponent 是您创建的作为对话框包装器的自定义对话框组件。

export class YesNoComponent {

  constructor(private dialogRef: MatDialogRef<YesNoComponent>  ) { }

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

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

演示：https://stackblitz.com/edit/angular-custom-popup-candeactivate-mp1ndw

如何异步订阅candeactivate guard的matdialog服务？

How to subscribe asynchronously to matdialog service for candeactivate guard?

angular

angular-material

observable

subscribe

candeactivate

你的问题

您现有的解决方案

使用对话框

解决方案