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 с использованием канала?

Answer 1

Честно говоря, я не могу найти ни одного сценария, в котором вы предпочитаете визуализировать элемент DOM из канала, а не из Directive.

Вы можете ввести ElementRef в directive ctor.

Трубы должны преобразовывать только значения и могут оптимизировать преобразование, будучи чистыми и не пересчитывать при каждом изменении объектов.