如何从 Angular 子组件内的“顶级组件”获取 DI？

Question

来自角度文档：

创建一个“顶级组件”，充当所有模块组件的根。将自定义 HttpBackend 提供程序添加到顶部组件的提供程序列表而不是模块的提供程序。回想一下，Angular 为每个组件实例创建一个子注入器，并使用组件自己的提供程序填充注入器。

当该组件的子组件请求 HttpBackend 服务时，Angular 会提供本地 HttpBackend 服务，而不是应用程序根注入器中提供的版本。无论其他模块对 HttpBackend 执行什么操作，子组件都会发出正确的 http 请求。

确保将模块组件创建为该模块顶部组件的子组件。

如果我们打开分层依赖注入器文档的源文件，我们可以看到ACarComponent,BCarComponent并创建,和CCarComponent的三个不同实例。CarServiceCarService2CarService3

但是，如果我也在模块级别上提供，如何CarService从父组件的 DI 中获取子组件呢？BCarComponentCarService

Answer 1

如果您不为 提供提供程序CCarComponent，它将尝试从其父组件获取该提供程序实例，依此类推。

让我们看一个例子。

@Component({
   selector: 'a-car-comp',
   template: '<div><b-car-comp></b-car-comp></div>',
   providers: [CarService]
})
class ACarComponent { 
    constructor(private carService: CarService) {}
}


@Component({
   selector: 'b-car-comp',
   template: '<div><c-car-comp></c-car-comp></div>'
})
class BCarComponent { 
    constructor(private carService: CarService) {}
}

@Component({
   selector: 'c-car-comp',
   template: '<div></div>'
})
class CCarComponent { 
    constructor(private carService: CarService) {}
}

这里我将一个实例注入CarService到 A、B 和 C Car 组件中。在 B 和 C 组件中，我没有提供自己的CarService（提供者列表为空），因此它会转到他的父组件（在他的模板中使用它）并获取相同的实例。

每个想要服务实例的组件首先尝试在它自己的提供者中查找，如果没有找到，则转到上层组件并尝试在那里查找，直到根组件（这是在upper component其模板中使用当前组件的组件） ）。如果在那里也没有找到，Angular 会抛出一个

错误：找不到 YourService 的提供商