Angular依赖注入与提供器层级困惑：组件级提供为何未生效？

你的问题核心在于对Angular注入器的实例归属和依赖查找逻辑理解有误，以下是具体分析和解决方法：

关键原因：服务实例的注入器归属决定依赖查找路径 #

MyService的provider注册在AppModule的providers数组中，这意味着：

• MyService的实例由Root ModuleInjector创建，整个应用中只会存在这一个实例（除非在其他层级重新注册）。
• 当MyService需要注入innerDependency时，Angular会从MyService所在的ModuleInjector开始向上查找依赖，而非从注入MyService的AppComponent的ElementInjector开始。

所以即使AppComponent的providers里配置了innerDependency: 'local'，也不会被MyService用到——因为MyService的依赖查找链根本不会走到组件的ElementInjector层级。

如何实现预期效果？ #

要让MyService使用AppComponent层级的innerDependency，需要让MyService的实例归属到AppComponent的ElementInjector，有两种常见方式：

方案1：将MyService注册到AppComponent的providers中 #

修改app.component.ts，把MyService加入组件的providers数组：

import { Component } from '@angular/core';
import { MyService } from './my.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [
    MyService, // 在这里注册服务，让实例归属于组件注入器
    {provide: 'innerDependency', useValue: 'local'}
  ]
})
export class AppComponent {
  constructor(service : MyService){}
}

此时MyService的实例由AppComponent的ElementInjector创建，查找innerDependency时会优先使用组件层级的配置，日志会输出local。

方案2：使用@Injectable的providedIn配置结合组件覆盖 #

如果MyService原本是用providedIn: 'root'注册的（而非模块providers），可以在组件层级重新注册MyService来覆盖：

// my.service.ts
@Injectable({ providedIn: 'root' })
export class MyService {
    constructor(@Inject('innerDependency') innerDep: String){
        console.log(innerDep);
    }
}

// app.component.ts
@Component({
  ...
  providers: [
    {provide: MyService, useClass: MyService}, // 覆盖根服务，实例归组件注入器
    {provide: 'innerDependency', useValue: 'local'}
  ]
})

核心规则总结 #

• 服务的实例创建位置由其provider的注册位置决定，而非它被注入到哪个组件。
• 依赖查找的起点是服务实例所在的注入器，向上依次查找父注入器，直到找到匹配的token。
• ModuleInjector的层级高于ElementInjector，组件的ElementInjector会继承模块注入器的依赖，但模块注入器不会向下查找组件的注入器。

内容的提问来源于stack exchange，提问作者Urooj