Angular中如何使用依赖其他瞬态服务的瞬态服务且无需全列依赖

核心原因 #

你遇到的NullInjectionError是因为这些服务默认未指定注入器范围（@Injectable()未配置providedIn），Angular无法定位这些依赖实例的来源。当仅在组件providers中声明ParentService时，注入器只能找到该服务本身，无法解析它依赖的子服务及更深层级的依赖。

两种优雅的解决方式 #

1. 全局注册所有依赖服务（最常用方案）

给每个服务的@Injectable()装饰器添加providedIn: 'root'配置，这样它们会自动注册到根注入器，整个应用内的组件都能访问这些服务。此时你只需在组件中声明ParentService，Angular会自动递归解析所有依赖：

@Injectable({ providedIn: 'root' })
export class ParentService {
   private child1 = inject(ChildService1);
   private child2 = inject(ChildService2);
   // ... more injects
}

@Injectable({ providedIn: 'root' })
export class ChildService1 {
   private subChild1 = inject(SubChildService1);
   // ... more injects
}

@Injectable({ providedIn: 'root' })
export class ChildService2 {
   private subChild2 = inject(SubChildService2);
   // ... more injects
}

@Injectable({ providedIn: 'root' })
export class SubChildService1 {
}

@Injectable({ providedIn: 'root' })
export class SubChildService2 {
}

完成配置后，组件甚至可以去掉providers: [ParentService]，直接通过inject(ParentService)获取实例（因为ParentService也已全局注册）。

2. 模块级注册（适用于服务仅在特定模块使用的场景）

如果不想全局暴露这些服务，可以将所有依赖服务统一声明在所属NgModule的providers数组中，该模块内的所有组件都能直接使用ParentService，无需在组件内重复声明依赖：

@NgModule({
  declarations: [MyComponent],
  providers: [ParentService, ChildService1, ChildService2, SubChildService1, SubChildService2]
})
export class MyModule { }

此时组件可以完全移除providers配置，直接注入服务：

@Component({})
export class MyComponent {
   private parentService = inject(ParentService);
}

补充：组件级批量声明（不推荐，仅作备选）

如果必须在组件级别控制依赖范围，又想简化写法，可以用对象语法声明所有依赖，但本质仍需列出全部服务，仅写法略有不同：

@Component({  
providers: [
  ParentService,
  { provide: ChildService1, useClass: ChildService1 },
  { provide: ChildService2, useClass: ChildService2 },
  { provide: SubChildService1, useClass: SubChildService1 },
  { provide: SubChildService2, useClass: SubChildService2 }
]
})
export class MyComponent {
   private parentService = inject(ParentService);
}

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