Как отправить возвращаемое значение в CanDeactivate Guard после закрытия диалогового окна |Угловая CanDeactivate Guard |Угловой материал Диалог

Question

Я использую CanDeactivate Guard для обнаружения несохраненных изменений, и если изменения произошли, я показываю диалог подтверждения материала перед тем, как покинуть страницу.На основании действия диалога я верну логическое значение.

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
      }
    });
  }

verifyDialog.html:

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

verifyDialog.ts:

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

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

То же, что и метод подтверждения.Я хочу перемещаться по странице на основе возвращаемого значения действия диалога

Answer 1

Вам очень повезло, потому что одним из возможных типов возврата canDeactivate является Observable<boolean>, и это именно то, что возвращает dialogRef.afterClosed().

Так что просто определите dialogRef как свойство из UnsavedChangesComponentи return component.dialogRef.afterClosed(); в твоей охране!