Маршрутная охрана 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.');
    }
}