CanDeactivateGuard не работает с подтверждением подписки

Question

Мне нужно создать canDeactiovateGuard, чтобы пользователь не терял данные формы при попытке покинуть страницу формы. Этот код ниже не работает, так как return canDeactivate работает до подтверждения canDeactivate =. Я не знаю, как это исправить.

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

  canDeactivate(component: Component): boolean {
    let canDeactivate: boolean;
    if (component.formValueChanged) {
        component.confirmService.confirm("You have unsaved data. Are you sure?")
            .pipe(first())
            .subscribe((confirmed: boolean) => {
                canDeactivate = confirmed;
            });
    } else {
        canDeactivate = true;
    }
    return canDeactivate;
  }

}

Answer 1

Вместо этого попробуйте вернуть Observable<boolean>. Это можно сделать с помощью таких операторов, как RxJS map. В любом случае, в таких охранниках, как CanDeactivate или CanActivate, вы бы никогда не использовалиsubscribe() поскольку вы не можете ничего вернуть изнутри subscribe() и вместо этого вернуться Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree:

import { map } from 'rxjs/operators';

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

  canDeactivate(component: Component): Observable<boolean> | boolean {
    if (component.formValueChanged) {
        // Return the observable instead of the subscription
        return component.confirmService.confirm("You have unsaved data. Are you sure?")
            .pipe(first())
            // You may be able to remove map() assuming confirm() always returns Observable<boolean>
            .map((confirmed: boolean) => confirmed);
    }

    return false;
  }
}