有没有办法根据角度2中的路线注入不同的服务?

问题描述 投票:1回答:1

我对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方面缺少一些东西,但我找不到任何简单的东西。我知道有工作,但希望找到一个更优雅的解决方案,只是想知道我想做什么是可能的。

谢谢!

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

angular dependency-injection routing angular2-routing
1个回答
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)
   }
}
© www.soinside.com 2019 - 2024. All rights reserved.