自定义管道实例位于何处？组件代码如何访问其 HTML 中使用的自定义管道实例？

Question

我在组件的 HTML 部分使用了自定义管道。它在模块中声明：

  declarations: [  I18nPipe ],

我希望能够从组件代码（而不是 transform 方法）对其调用方法。

我希望管道实例位于依赖注入上下文中的某个位置，以便我可以获取它。但是我错了。如果我将它注入到组件的构造函数中（例如任何普通服务）：

  constructor(private i18nPipe: I18nPipe)

然后我得到一个错误：没有供应商。所以我将它包含在同一模块的 providers 部分中：

  providers: [ I18nPipe ]

然后我将可以在组件代码中访问它，但是我的自定义管道将有两个个实例。

由 providers 创建，在 DI 上下文中可用。我将在构造函数中注入时获得此实例，因此我将在我的组件代码中使用此实例。
HTML中使用的实例。它在哪里生活？我想在我的组件代码中访问这个实例，而不是 "provided" 那个；我怎样才能获得它？

Answer 1

每个 Angular 组件都被编译到带有节点的视图中。管道是节点类型之一。并且除了在组件的宿主元素上定义的父组件和指令之外，您不能注入视图节点。

假设您有以下组件模板：

<div>{{3|mypipe}}</div>

您将拥有以下视图节点：

PipeElement
HTMLDivElement
HTMLTextElement

然后在更改检测期间 Angular 遍历每个节点并执行更改检测特定操作 - dom 更新、绑定更新或 transform 方法调用。

如果需要，您可以通过 View 实例（不是 public API）访问管道实例，如下所示：

class I18nPipe {
   sayHello() {}
}

class ComponentWithPipe {

  constructor(cd: ChangeDetectorRef) {
    setTimeout(() => {
      const pipeNode = cd._view.nodes.find((n) => {
        return n.instance && n.instance instanceof I18nPipe
      });
      const pipeInstance = pipeNode.instance;
      pipeInstance.sayHello();
    })
  }

但这仅用于教育目的。您不想在生产中使用这种方法。

以下是一些可以帮助您理解的文章：

自定义管道实例位于何处？组件代码如何访问其 HTML 中使用的自定义管道实例？

Where does a custom pipe instance live? How can the component code access the custom pipe instance used in its HTML?

angular2-di

angular2-custom-pipes

angular