Question

From Angular documentation：

创建一个＆＃34;顶级组件＆＃34;它充当所有模块的根   组件。将自定义HttpBackend提供程序添加到顶级组件   提供商列出而不是模块的提供商。回想一下Angular   为每个组件实例创建一个子注入器并填充   具有组件自己的提供者的注射器。

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

务必创建模块组件作为此模块顶部的子级   成分

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

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

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（提供者列表为空），因此它转到他的父组件（在模板中使用它）并获得相同的实例。

每个希望服务实例的组件首先尝试在其自己的提供程序中找到，如果没有找到，则转到上层组件并尝试查找到那里，直到根组件（这里{{1是在其模板中使用当前组件的那个。如果在那里也找不到，Angular会抛出一个

错误：找不到您的服务的提供商

如何从＆＃34;顶级组件＆＃34;获得DI Angular里面的子组件？

1 个答案: