动态注册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方法，那么它将用于控制停用，否则路由器导航将继续。

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