Angular中能否通过组件providers数组向另一服务注入服务?
问题原因
- 你当前的
ParentService配置了providedIn: 'root',属于根注入器管理的单例服务,它的依赖只会从根注入器层级查找,不会向下查找组件级的注入器,所以你在AppComponent的providers里声明的EXAMPLE_TOKEN根本不在根注入器的查找范围内,自然抛出找不到依赖的错误。 - 组件级注入器的provider,只会对当前组件、子组件、以及直接注入到这些组件中的服务可见,根级服务不会读取组件级的provider。
实现方案
按组件维度提供服务、不使用模块providers的需求可以实现,调整方式如下:
- 首先去掉
ParentService的providedIn: 'root'配置,改为无全局注入声明,这样服务就不会默认被根注入器实例化:
@Injectable() // 移除providedIn: 'root'配置 export class ParentService { constructor(@Inject(EXAMPLE_TOKEN) private conf: ExampleService) { } }
- 在需要用到
ParentService的组件的providers数组中,同时声明EXAMPLE_TOKEN和ParentService,让两者都归当前组件的注入器管理,即可正常完成依赖注入:
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [ { provide: EXAMPLE_TOKEN, useClass: ExampleService }, ParentService // 新增,将ParentService也放入组件providers ] }) export class AppComponent { }
如果需要服务作用域更精细化,也可以直接在子组件app-example的providers中声明上述两项,服务的生效范围就会被限制在app-example及其子组件范围内,完全实现组件维度的服务隔离。
内容的提问来源于stack exchange,提问作者Razvan
相关产品推荐
相关产品推荐

