Angular DI 提供者与 viewProviders

Question

我正在尝试了解 Angular 的 DI 框架并参考https://angular.io/guide/hierarchical-dependency-injection 中的官方文档；特别是 viewProviders 和 providers 属性之间的区别。

虽然我不能说内容很容易理解（尤其是它解释了它如何使用组合逻辑树并在 <#VIEW> 中使用符号 @Provide 和 @Inject 的部分有时在组件的选择器标签中），我得出结论，使用 viewProviders 而不是提供程序会影响使用 <ng-content> 的投影内容的呈现@

谈到这个问题，如果 在提供程序和 viewProviders 中都使用相同的 DI 令牌，我看不到对场景的解释。

例如。

参考 parent.component.ts 中的 sn-p，我的问题是：如果通过取消注释 providers 属性能够呈现元素注入器中配置的值“world”，而不是模块注入器中的值“hello”，为什么忽略值“angular”？

viewProviders: [{ provide: Service, useValue: { value: 'world' } }],
  // providers: [{ provide: Service , useValue: { value: 'angular' } }], // If I uncomment this line the "hello" changes to "world" and the value "angular" is disregarded

在https://stackblitz.com/edit/angular-syh4mx

这可能不是一个有效的用例，但我有兴趣了解它为什么会这样。

Answer 1

基于此documentation，您将价值注入最近的注入器。如果您已注释掉提供程序，则关闭注入器是全局注入器，并且如果其未注释的最近注入器位于组件上。

这有点像一个错误，因为直觉上的全局注入器也没有viewProvider 重要，并且当provider 不存在时，它的行为应该类似。但正如您在unit test 中看到的那样，它的预期行为定义了在同时定义providers 和viewProviders 时它的行为方式。您可以在section的末尾找到您问题的确切答案

<app-root @NgModule(AppModule)
        @Inject(FlowerService) flower=>"?">
  <#VIEW>
    <p>Emoji from FlowerService: {{flower.emoji}} (?)</p>
    <app-child @Provide(FlowerService="?")
               @Inject(FlowerService)=>"?"> <!-- search ends here -->
      <#VIEW> <!-- search starts here -->
        <h2>Parent Component</h2>
        <p>Emoji from FlowerService: {{flower.emoji}} (?)</p>
      </#VIEW>
     </app-child>   </#VIEW> </app-root>

当请求 FlowerService 时，注入器开始它的 搜索属于 ( 的 因为它是从@Component()) 注入的，并以 .

结尾

被包括在内，因为它是从 @Component() 注入的，所以就像如果 providers 是注释的一部分，那么它的触发器包括作为查找列表一部分的视图并在查找列表首先检查 viewProviders 中的值。

您可以找到与此行为相关的代码here