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

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.');
    }
}