Маршрутная охрана Angular не работает в приложении

Question

Я добавил маршрут с охраной на своем app-routing.module.ts файл вроде так:

{path: 'detail/:id', component: DetailComponent, canDeactivate: [PendingChangesGuard]},

Если я попытаюсь полностью покинуть угловое приложение, я увижу ожидаемое сообщение от PendingChangesGuard, Однако, если я нажму на любой другой маршрут в угловом приложении, то защита маршрута не будет выполнена. Как мне заставить его работать в этом случае?

Вот как выглядит файл защиты маршрута:

export interface ComponentCanDeactivate {
    canDeactivate: () => boolean;
}

@Injectable({
    providedIn: 'root'
})
export class PendingChangesGuard implements CanDeactivate<ComponentCanDeactivate> {
    canDeactivate(component: ComponentCanDeactivate, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState?: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
        return component.canDeactivate ? true : confirm('WARNING: You have unsaved changes. Press Cancel to go back and save your changes.');
    }
}

и в DetailComponent Я сделал это:

@HostListener('window:beforeunload')
canDeactivate(): boolean {
    console.info("I got called");
    return !this.formGroup.dirty;
}

Answer 1

Вы на самом деле не звоните component.canDeactivate в твоей охране Вы в основном проверяете, определено ли оно (что всегда верно), а затем возвращаете true,

Обновление до:

export class PendingChangesGuard implements CanDeactivate<ComponentCanDeactivate> {
    canDeactivate(component: ComponentCanDeactivate, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState?: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
        return component.canDeactivate() ? true : confirm('WARNING: You have unsaved changes. Press Cancel to go back and save your changes.');
    }
}