angular - 动态注册canDeactivate guard并提示确认导航

Question

有什么方法可以让组件为自己动态注册 canDeactivate 防护？它主要是提示/阻止用户使用是/否等确认导航。

我正在尝试这样做，因为有问题的应用程序非常大，并且工作流组件（例如：支付、转账等）分布在应用程序中的许多不同模块中。我不确定在路由器配置中静态注册它们是否是个好主意。

我正在寻找一种在组件中可以提示和控制类似于警卫的导航的方法。

Answer 1

组件不能注册路由器保护，但是最常见的canDeactivate实现依赖于要定义的组件方法。

条带化版本可以是：

export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
 canDeactivate(component: CanComponentDeactivate) {
   return component.canDeactivate ? component.canDeactivate() : true;
 }
} 

基本上，如果一个组件公开了一个canDeactivate方法，那么它将用于控制停用，否则路由器导航将继续。

我会在您的顶级组件上注册一个类似的守卫，并让单个组件实现或不实现特定方法。