Доступ к дочерним компонентам внутри элемента html родительского компонента

Question

Требование, которое у меня есть, - это создать компонент, который может обращаться к дочерним компонентам, добавляемым к нему в разметке, и отображать их.

HTML

<my-parent>
    <span>hey</span>
    <span>heck</span>
</my-parent>

Rendered HTML

<div>
    <span>before</span>
    <span>hey</span>
    <span>after</span>
    <br />
    <span>before</span>
    <span>heck</span>
    <span>after</span>
</div>

Мне не удалось найти какой-либо ресурс, который бы помог мне с этим. Это поведение аналогично тому, как выбор mat взаимодействует с параметрами mat.

Answer 1

Используйте ng-content с select в качестве , демонстрация здесь

<my-parent>
  <span a>hey</span>
    <span b>heck</span>
</my-parent>

  <div>
    <span>before - </span>
    <ng-content select="[b]"></ng-content>
    <span> - after</span>
    <br />
    <span>before - </span>
    <ng-content select="[a]"></ng-content>
    <span> - after</span>
</div>