在 Angular 中利用 Multi Provider 实现动态切换 Service

天魂
Autor 天魂 一个死磕 Angular 的逼粉

(最后一次更新: ) 阅读需要 1 分钟

在 Angular 中利用 Multi Provider 实现动态切换 Service

在 Angular 中能以依赖注入的方式注入 service ，一般要注入那个 service 是在 Compile-time 决定的。 如果在特殊场景中：Compile-time 还不知道要注入那个 service ，那么就要在 Runtime 利用骚操作注入 service。

示例代码

划重点

app.component.ts

26行

1

constructor(private serviceFactory: ServiceFactory) {}

30行

1

this.service = this.serviceFactory.createService(serviceName);

因为不是在 Compile-time 决定要注入那个 service，那么在 constructor 中依赖注入时应注入 ServiceFactory，从而利用 ServiceFactory 在 Runtime 改变 service。

app.module.ts

21-24行

1
2
3
4

{ provide: ServiceToken, useClass: NullService, multi: true},
{ provide: ServiceToken, useClass: AWSService, multi: true},
{ provide: ServiceToken, useClass: AzureService, multi: true},
{ provide: ServiceToken, useClass: GcpService, multi: true}

为了让符合 ServiceInterface 的 service 在 ServiceFactory 中一次性全部注入，就要在 AppModule 的 provider 加上 multi: true，这样所有 interface 相同的 service 将以数组的形式一次全部注入。

💡其他疑问可以在「web 前端骚操作」知识星球 一起探索
评分:

🌀 Summary

# 扫码加入「web 前端骚操作」社群 #
🌈 社群介绍
comments powered by Disqus