angular - 指令和组件中本地提供者的优先级

Question

我认为指令的本地提供者是为其内容子项提供服务，例如:

//template in a module 
<table>
   <tr>
      <td>{{ item.price | myPipe }}</td>    
   </tr>
</table>

myPipe具有 MyService 的依赖关系在其构造函数中:
因此，如果我将指令定义为:

@Directive({
    selector: "[myAttr]", 
    providers: [MyService]
})
export class MyDirective { }

并将其应用为:

<table>
   <tr myAttr>
      <td>{{ item.price | myPipe }}</td>    
   </tr>
</table>

然后 MyService在 myPipe的构造函数可以解析。
但是如果有组件也要定义 MyService在其本地提供商中并将其应用为:

<myComponent>
   <tr myAttr>
      <td>{{ item.price | myPipe }}</td>    
   </tr>
</myComponent>

由于 MyDirective和 MyComponent可以为 myPipe 提供服务，所以哪一个会 myPipe选择， MyDirective 的本地提供商或 MyComponent ?

Answer 1

前提
Angular 中的每个组件都有自己的 Injector 上下文，用于为其自身及其组件树提供服务(或更一般地说，Injectables)。
简短的回答
管道似乎总是使用它们所在模板的组件的注入(inject)器上下文(经过我的经验测试，需要引用)。因此，如果您有一个带有如下模板的组件(我们称之为 parentComponent):

<myComponent>
   <tr myAttr>
      <td>{{ item.price | myPipe }}</td>    
   </tr>
</myComponent>

然后 myPipe将 不是 从 myComponent 获取服务实例或 myAttr !所以你的问题的直接答案是 都不是 !
相反，它将获得声明组件(即 parentComponent )使用(提供)的服务实例。
简短说明
就 HTML 结构而言， myPipe 似乎确实如此。是 myComponent 的 child 和 myAttr .但是， 就 Angular 的层次结构而言 myPipe是 parentComponent 的 child 所以它在那里找到了它的服务提供商。此外，与组件不同，管道不受内容投影的影响(使用 <ng-content> )。
还...
您对如何提供服务的理解似乎不太正确。以下是对您所做陈述的一些更正:

“[I]如果我将指令定义为 (...) 并应用它 (...)，则可以解析 myPipe 的构造函数中的 MyService” - 不正确，如我的回答中所示。

“如果有一个组件也在其本地提供程序中定义 MyService (...) MyDirective 和 MyComponent 都可以为 myPipe 提供服务” - 出于同样的原因，也不正确。

最后
组件的行为与管道不同。它们形成组件树，并且 Injector 上下文相应地发生变化。所以如果代替 myPipe你有一个 yetAnotherComponent ，它实际上会得到 myComponent 提供的 MyService而不是 parentComponent .
终于终于
如果您的指令提供服务并且您将该指令应用于组件，则该组件将获得指令提供的服务!当然，除非它自己注册了提供者。