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

Question

我的要求是生成一个组件，该组件可以访问和呈现在标记中添加到它的子组件。

HTML

<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 选项的交互方式。

Answer 1

使用ng-content 和select 作为demoed here

<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>