1

我在我的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;
}
4

1 回答 1

0

你实际上并没有召唤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.');
    }
}
于 2019-02-25T01:00:10.307 回答