有没有一种方法可以根据角度2中的路由注入其他服务?

时间:2018-09-12 22:14:42

标签: angular dependency-injection routing angular2-routing

我对Angular 2及其依赖注入功能有些陌生,但是还没有找到一种简单的方法来更改基于路线的组件依赖关系。

I.E。 给定需要服务的组件。

MyReusableComponent {
   constructor(private service: ServiceIWantToChange){}
}

鉴于我要在Web应用程序的不同部分中添加一条新路线,以重新使用该组件。

我想做这样的事情: NewAreaRoutingModule

{ 
   path: "newRoute",
   component: MyReusableComponent,
    ** my made up provider area ** -providers: [{provide: 
      ServiceIWantToChange, useClass: MyServiceWithChanges}]
}

我想到这就是处理位置敏感依赖项的一种方式。

我认为我可以提供Component的重写实现,为可重用的组件提供新的依赖关系,但我希望只是更改路由中的依赖关系。

我一直在围绕解析器等进行研究,但这些似乎更多是为了提供数据。我还注意到有人注射了进样器,并进行了if检查以使部件正确。看到了几种不同的方式。我敢肯定,关于路由和DI我缺少一些东西,但是我找不到简单的东西。我知道有解决方法,但我希望找到一个更优雅的解决方案,只是想知道我想做的事是否可能。

谢谢!

以下是用例的详细信息,以防万一我通常会遇到此错误...在系统的一个区域中,我要使用的服务会在服务器上的其余端点的一个版本中起作用,而在系统的另一部分中我想重用完全相同的组件,但是让它将其请求发送到另一组端点。

1 个答案:

答案 0 :(得分:1)

将注入令牌与路线数据相结合,可以为您提供所需的结果。 使用不同的注入令牌提供服务:

const FIRST_SERVICE_TOKEN = new InjectionToken<string>("FirstService"); 
const SECOND_SERVICE_TOKEN = new InjectionToken<string>("SecondService"); 

@NgModule({
  providers: [
     {
        provide: FIRST_SERVICE_TOKEN,
        useClass: FirstService
     },
     {
        provide: SECOND_SERVICE_TOKEN,
        useClass: SecondService
     }
  ],
})
class AppModule {}

然后,使用路线数据指定每个路线的依赖性:

{path: 'first-route', component: MyComponent, data: {requiredService: FIRST_SERVICE_TOKEN}},
{path: 'second-route', component: MyComponent, data: {requiredService: SECOND_SERVICE_TOKEN}}

最后使用路线数据获取相应的服务

export class MyComponent{
   private myService;
   constructor(route: ActivatedRoute, injector:Injector){
       const serviceToken = route.snapshot.data['requiredService'];
       this.myService = injector.get(serviceToken)
   }
}