访问父组件的 html 元素内的子组件

Question

我的要求是生成一个可以访问和渲染在标记中添加到其中的子组件的组件。

超文本标记语言

<my-parent>

    <span>hey</span>

    <span>heck</span>

</my-parent>

渲染的 HTML

<div>

    <span>before</span>

    <span>hey</span>

    <span>after</span>

    <br />

    <span>before</span>

    <span>heck</span>

    <span>after</span>

</div>

我无法找到任何资源来帮助我。此行为类似于 mat select 与 mat options 交互的方式。

Answer 1

使用ng-contentwithselect<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>