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>. Это можно сделать с помощью таких операторов, как Rx JS 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;
  }
}