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

Question

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

  declarations: [  I18nPipe ],

我希望能够从组件代码(不是 transform 方法)调用它的方法。

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

  constructor(private i18nPipe: I18nPipe)  

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

  providers: [ I18nPipe ]

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

1. 由 providers 创建，在 DI 上下文中可用。我将在构造函数中注入(inject)时获得此实例，因此我将在我的组件代码中使用此实例。

2. HTML 中使用的实例。它在哪里生活？我想在我的组件代码中访问这个实例，而不是“提供的”那个；怎么获取？

Answer 1

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

假设您有以下组件模板:

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

您将拥有以下 View 节点:

PipeElement
HTMLDivElement
HTMLTextElement

然后在变更检测期间，Angular 遍历每个节点并执行变更检测特定操作 - dom 更新、绑定(bind)更新或 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();
    })
  }

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

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

• Everything you need to know about change detection in Angular
• Here is why you will not find components inside Angular
• Angular’s $digest is reborn in the newer version of Angular