Question

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

  declarations: [  I18nPipe ],

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

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

  constructor(private i18nPipe: I18nPipe)

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

  providers: [ I18nPipe ]

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

由providers创建，可在DI上下文中找到。我将在构造函数中注入时获取此实例，因此我将在组件代码中使用此实例。
HTML中使用的实例。它在哪里生活？我希望在我的组件代码中访问此实例，而不是“提供”的实例;我怎样才能获得它？

Answer 1

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

假设您有一个组件的以下模板：

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

您将拥有以下视图节点：

PipeElement
HTMLDivElement
HTMLTextElement

然后在更改检测期间，Angular会遍历每个节点并执行特定于更改检测的操作 - dom update，bindings update或transform方法调用。

如果您愿意，可以通过View实例（非公共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中使用的自定义管道实例？

1 个答案: