Angular DI 提供者与 viewProviders

Question

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

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

关于这个问题，如果在提供者和 viewProviders 中使用相同的 DI token ，我看不到对场景的解释。

例如。

引用 parent.component.ts 中的片段，我的问题是:如果通过取消注释 providers 属性启用元素注入(inject)器中配置的值“world”，而不是值“模块注入(inject)器中的“你好”，为什么忽略值“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您正在将值(value)注入(inject)到最近的注入(inject)器。如果您注释掉了提供者，则关闭注入(inject)器是全局注入(inject)器，并且如果其未注释的最近注入(inject)器位于组件上。

它看起来有点像一个错误，因为直觉上的全局注入(inject)器也没有 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>

When requests the FlowerService, the injector begins its search at the <#VIEW> belonging to (<#VIEW> is included because it is injected from @Component()) and ends with .

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

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