Angular2：如何为多个组件提供相同的防护

Question

在Angular2中，是否可以具有可以应用于多个组件的相同防护（例如CanActivate或CanDeactivate）？

这是一个警卫MyComponent1：

@Injectable()
export class MyGuard implements CanDeactivate<MyComponent1> {

  canDeactivate(component: MyComponent1): Promise<boolean> {
    // my code here
  }
}

我想要完全相同的后卫MyComponent2，MyComponent3等等。

我该如何实施呢？我需要按组件声明新的防护类，还是可以重用我的类MyGuard？

Answer 1

只需向要应用该路由的每个路由添加相同的防护。

或者，您也可以在添加保护的地方创建一个无组件的父路由，所有子路由都将由相同的保护来保护。仅当组件全部处于同级路由中时，此方法才有效。

Angular DI不支持泛型类型参数。作为解决方法，这应该做您想要的（事件可能比您想要的更冗长）：

routes: [
  { path: 'x', component: MyComponent1, canDeactivate: [new Inject('CanDeactivateMyComponent1') },
  { path: 'y', component: MyComponent2, canDeactivate: [new Inject('CanDeactivateMyComponent2') },

]


@NgModule({
  providers: [
    {provide: 'CanDeactivateMyComponent1', useFactory: () => new CanDeactivate<MyComponent1>()},
    {provide: 'CanDeactivateMyComponent2', useFactory: () => new CanDeactivate<MyComponent2>()},

  ],
})
export class AppModule {}
  ...
})

Answer 2

路线：

routes: [
    { path: 'x', component: MyComponent1, canDeactivate: ['MyGuard '] },
    { path: 'y', component: MyComponent2, canDeactivate: ['MyGuard '] },
]

警卫：

@Injectable()    
export class MyGuard implements CanDeactivate<MyComp1 | MyComp2> {    
    constructor() { }    

  canDeactivate(    
    component: PermissionSetsComponent | NodeAccessGroupComponent,    
    ): Observable<boolean> | Promise<boolean> | boolean {    

 // Your code here    
 }    
}