angular - 包含自定义组件 html 的角度管道

Question

想象一个这样的管道：

@Pipe({ name: 'addIcon' })
export class AddIconPipe implements PipeTransform {
  constructor() {}
  transform(value) {
    return (
      `
      <div class="icon">
        <app-icon name="welcome"></app-icon>
      </div>
    ` + value
    );
  }

当你像这样使用这个管道时，{{ 'Garry' | appIcon }} 你会得到下一个结果：

<div class="icon">
</div>
Garry

但预期的结果是：

<div class="icon">
  <app-icon>
    contents of the app-icon component..., for example
    <img src="welcome.jpg" />
  </app-icon>
</div>
Garry

似乎管道中的自定义组件根本不呈现。

如何使用管道呈现自定义组件 html？

标签： angularpipe

Answer 1

老实说，我找不到任何你喜欢从管道而不是从Directive.

ElementRef您可以在directivector 中注入。

管道应该只转换值，并且可以通过纯粹的方式优化转换，并且不会为对象的每次更改重新计算。