angular - Angular のルート ガードがアプリ内で実行されていません

Question

次のように、ガード付きのルートをapp-routing.module.tsファイルに追加しました。

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

Angular アプリケーションを完全に終了しようとすると、予想されるメッセージがPendingChangesGuard. ただし、Angular アプリケーション内の他のルートをクリックすると、ルート ガードは実行されません。その場合もどのように実行すればよいですか？

ルート ガード ファイルは次のようになります。

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