在路由级别为相同的 InjectionToken 提供不同的提供程序答案

【问题标题】：Having different providers for the same InjectionToken at the route level在路由级别为相同的 InjectionToken 提供不同的提供程序
【发布时间】：2021-07-13 02:23:51
【问题描述】：

我有一个组件，我想在两条单独的路线中使用，并为每条路线提供不同的服务 - 但我不确定如何执行此操作。我想避免将逻辑放在组件中来决定使用哪个服务。

class MyPage {
    constructor(service: MyServiceInterface)
}

路线

routes = [
  { path: 'one', component: MyPage }, 
  { path: 'two', component: MyPage }
]

然后在模块中 - 我想为每个路由为 MyServiceInterface 提供不同的服务

providers: [
   { provide: MyServiceInterface, useClass: PageOneService }, 
   { provide: MyServiceInterface, useClass: PageTwoService }
]

【问题讨论】：

您可以使用data 属性来解决您的问题，如果路由不是延迟加载的模块，则不可能影响提供者
您也可以根据数据使用一些配置逻辑渲染 HostComponetn 以隔离该 logi
您可以简单地创建“包装器”组件，这些组件将成为上述服务的提供者，并且在模板中都将您的MyPage 组件作为唯一元素。然后你可以在路由中使用这些组件，这意味着每条路由都有不同的提供者。请记住，您的组件将遍历组件树并查找第一个可能的提供程序，因此它将覆盖模块中注入的服务。
谢谢大家 - @TotallyNewb 我考虑过这个，但我不太喜欢样板，但这是一个可行的选择。再次感谢！

标签： angular dependency-injection

【解决方案1】：

正如 Andrei 在 cmets 中对问题所说，没有办法将提供者与路线相关联。在像你这样的情况下，当你有两个路由与同一个组件相关联时，组件可以知道哪个路由被用来实例化它，但只有在其构造函数被注入所有内容之后。 p>

基本上你必须改变你的策略，而不是依赖注入的服务，你应该使用路由的data或resolve属性。

data 用于静态数据
resolve 调用可以获取动态数据的守卫。

在您的情况下，一种方法是使用两个不同的保护（PageOneGuard、PageTwoGuard），它们依赖于适当的服务（PageOneService、PageTwoService）并最终产生一个值该组件可以使用。

【讨论】：

感谢您提供详细信息 - 您是说我可以使用 resolve 来获取相应的服务吗？
您可以让守卫解析服务并将服务本身传递到组件中，但这在 Angular 中是“违背规则的”。守卫应该使用该服务从它那里获取它需要的任何数据，并将那个传递给组件。