Question

我已经在我的app-routing.module.ts文件中添加了带有防护的路由，如下所示：

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

如果我尝试完全离开角度应用程序，那么我会从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），然后返回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.');
    }
}

Angular的路由防护未在应用程序中运行

1 个答案: