角管模板上下文答案

【问题标题】：Angular Pipe Template Context角管模板上下文
【发布时间】：2020-02-12 16:03:08
【问题描述】：

是否可以获得在模板中使用管道的确切模板位置/上下文/包装 html 元素（无需向管道传递任何额外参数）？

我尝试将ElementRef 注入管道构造函数，但这会返回整个组件元素，而不是确切的 DOM 位置。

模板示例：

...
<div>
    {{ 'blah' | myPipe}}
</div>
...

我想在管道被评估或包装div 的确切位置访问伪元素。

当前 Angular 版本 8

【问题讨论】：

为什么？你的最终目标是什么？
@yurzui 来自 OP：（无需通过管道传递任何额外的参数）。在我重新阅读 OP 之前，我一直在搞砸它
@KurtHamilton 谢谢，我需要仔细阅读
如果您使用的是 Angular 9，那么在您的管道中注入 ElementRef 将为您提供对使用管道的元素的引用。在这种情况下，它将是 TextNode
@yurzui 完美！谢谢你。

标签： angular templates pipe

【解决方案1】：

在 Angular 9 Ivy 中，注入 Pipe 中的 ElementRef 指向实际使用该 Pipe 的位置。

test.pipe.ts

@Pipe({
  name: 'test',
})
export class TestPipe implements PipeTransform {
  constructor(private el: ElementRef) {
    console.info("-->", this.el);
  }
...

html

<div class="bob">
  {{ 'mystring' | test }}
</div>

Ng-run Example

【讨论】：

完美！谢谢@yurzui

【解决方案2】：

一般来说，管道类似于在绑定到目标属性之前方便操作输入数据的函数。它不适用于操作 DOM。如果你想操作 DOM，那就在 Component 中进行，或者为它定义 Directive。

【讨论】：