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

Question

From Angular documentation:

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

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

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

如果我们打开Hierarchical Dependency Injectors 文档的源文件，我们可以看到ACarComponent、BCarComponent 和CCarComponent 创建了CarService、CarService2 和CarService3 的三个不同实例。

但是，如果我还在模块级别提供了CarService，我如何从父 DI 获取子组件 BCarComponent 的 CarService？

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 的提供者