canDeactivate 不适用于 Angular 材质模态窗口 [英] canDeactivate doesn't work with Angular material modal window

问题描述

我成功构建了 canDeactivate 守卫，它在正常 confirm 下工作正常，但我想用有角度的材质对话框来实现它，在这里我遇到了一些问题.

I successfully built canDeactivate guard and it is working fine with normal confirm but I want to implement it with angular material dialog and here I face some issues.

这是我的守卫:

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CreateQuoteComponent> {
  constructor(
    public dialog: MatDialog,
  ){

  }
  canDeactivate(component: CreateQuoteComponent): boolean {
    if (!component.changesSaved) {
      return component.confirmDialog();
      //return confirm('You have not saved your current work. Do you want to proceed and discard your changes?');
    }
    return true;
  }
}

它是我组件中的一个函数:

It is a function in my component:

confirmDialog(): boolean {
    const message = 'You have not saved your current work. Do you want to proceed and discard?';
    const data = { 'message': message, 'toShowCancel': true, 'buttonYesCaption': 'Yes', 'buttonNoCaption': 'No' };
    const dialogRef = this.dialog.open(YesNoComponent, {
      width: '600px',
      height: '250px',
      data: data
    });
    dialogRef.afterClosed().subscribe(result=>{
      this.dialogRef1=result;
      return this.dialogRef1;
    });
    return this.dialogRef1;
  }

 I defined a boolean variable dialogRef1 at the top of the component.

它是带有模态窗口的组件的一部分:

It is a part of the component with a modal window:

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

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

我已尝试实现此示例:如何发送退货关闭 mat-dialog 后 CanDeactivate Guard 的值 |Angular CanDeactivate Guard |角度材质对话框

但这对我不起作用，或者我做错了.提前致谢！

but it doesn't work for me or maybe I have done it wrong. Thanks in advance!

推荐答案

您正在返回一个由 Observable [即 dialogRef.afterClosed()] 设置的变量值，该值将由用户.您应该执行以下操作:

Your are returning a variable value which is being set by an Observable [i.e dialogRef.afterClosed()] which will be decided by the user. You should do the following:

首先，将 canDeactivate 的返回类型更改为 Observable 如下:

First, change the return type of canDeactivate as Observable<boolean> like this:

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CreateQuoteComponent> {
  constructor(
    public dialog: MatDialog,
  ){

  }
  canDeactivate(component: CreateQuoteComponent): Observable<boolean> {
    if (!component.changesSaved) {
      return component.confirmDialog();      
    }
    //please import 'of' form 'rxjs/operators'
    return of(true);
  }
}

现在让我们改变 component.confirmDialog 方法来返回 dialogRef.afterClosed() observable 像这样:

Now lets change component.confirmDialog method to return the dialogRef.afterClosed() observable like this:

confirmDialog(): Observable<boolean> {
    const message = 'You have not saved your current work. Do you want to proceed and discard?';
    const data = { 'message': message, 'toShowCancel': true, 'buttonYesCaption': 'Yes', 'buttonNoCaption': 'No' };
    const dialogRef = this.dialog.open(YesNoComponent, {
      width: '600px',
      height: '250px',
      data: data
    });
    return dialogRef.afterClosed();
  }

希望有帮助.

这篇关于canDeactivate 不适用于 Angular 材质模态窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！