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

Я использую 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
      }
    });
  }

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

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


person Dinesh Kannan    schedule 30.01.2019    source источник


Ответы (1)


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

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

person Guerric P    schedule 30.01.2019