angular - 有没有办法根据 Angular 2中的路线注入(inject)不同的服务？

Question

我对 Angular 2 及其依赖项注入(inject)功能有点陌生，但还没有找到一种简单的方法来更改基于路由的组件依赖项。

即 给定一个需要服务的组件。

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

假设我在 Web 应用程序的不同部分添加了一条新路由，该路由将重用该组件。

我想做这样的事情: 新区域路由模块

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

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

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

我一直在围绕解析器等进行研究，但这些似乎更多地用于提供数据。我还注意到有人注入(inject)了注入(inject)器并进行了 if 检查以获得正确的组件。看到了几种不同的方式。我确信我在路由和 DI 方面缺少一些东西，但我找不到任何简单的东西。我知道有解决方法，但希望找到一个更优雅的解决方案，只是想知道我想做的事情是否可能。

谢谢!

以下是用例详细信息，以防我一般遇到此错误...在系统的一个区域中，我想使用一项服务来命中服务器上和系统另一部分上的一个版本的其余端点我想重复使用完全相同的组件，但让它将请求发送到一组不同的端点。

Answer 1

将注入(inject) token 与路由数据相结合即可获得所需的结果。 使用不同的注入(inject) token 提供您的服务:

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)
   }
}