关闭mat-dialog后如何将返回值发送到CanDeactivate Guard.Angular CanDeactivate防护|角材料对话框

问题描述

我正在使用CanDeactivate Guard找出未保存的更改，如果发生更改，我将在离开页面之前显示确认材料对话框.基于对话框动作，我将返回布尔值.

I'm using CanDeactivate Guard for find out the unsaved changes and If changes occurred I am showing the confirm material dialog, before leaving the page. Based on the dialog action I will return the Boolean value.

CanDeactivateGuard.ts:

export class DeactivateGuard implements CanDeactivate<UnsavedChangesComponent> {

  canDeactivate(
    component: UnsavedChangesComponent,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> {

    if (component.isDirty) {
      return component.confirmDialog();

    }
    else {
      return true;
    }
  }
}

UnsavedChangesComponent.ts:

confirmDialog(): boolean {
    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
      width: '450px',
    });

    return dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        this.save();
        return false
      }
      if (result == false) {
        return true
      }
    });
  }

confirmDialog.html:

<button mat-button color="primary" (click)="save()">Save</button>
<button mat-button color="primary" (click)="cancel()">Cancel</button>

confirmDialog.ts:

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

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

与确认方法相同.我想根据对话框操作返回值浏览页面

It same like confirm method. I want navigate the page based on dialog action return value

推荐答案

您非常幸运，因为 canDeactivate 的可能返回类型之一是 Observable< boolean> 和这正是返回 dialogRef.afterClosed()的原因.

You are very lucky because one of the possible return types of canDeactivate is Observable<boolean> and that's precisely what returns dialogRef.afterClosed().

因此只需在您的警卫中将 dialogRef 定义为来自 UnsavedChangesComponent 和 return component.dialogRef.afterClosed(); 的属性！

So just define dialogRef as a property from UnsavedChangesComponent and return component.dialogRef.afterClosed(); in your guard!

这篇关于关闭mat-dialog后如何将返回值发送到CanDeactivate Guard.Angular CanDeactivate防护|角材料对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！