访问父组件的 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作为这里演示了

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