动态注册canDeactivate防护并提示确认导航

Question

有没有办法让组件为自己动态注册canDeactivate防护？它主要用于提示/阻止用户使用确认导航，如Yes/No。

我之所以尝试这样做，是因为这个应用程序相当大，工作流组件(例如:支付、转账等)分布在应用程序中的许多不同模块中。我不确定在路由器配置中静态注册它们是否是一个好主意。

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

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

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