Angular 嵌套，任意内容投影

Question

在 Angular 中，是否可以做类似的事情

<my-component>
  <h1>Some text</h1>
  <p>Some text</p>
  ...
</my-component

然后在my-component中把它变成

<div class="container">
  <h1>Some text</h1>
</div>
<div class="container>
  <p>Some text</p>
</div>
...

要投影的元素的数量和类型在哪里是任意的？ 每个子元素都需要放在一个新的<div class="container">中，但是子元素可以是任何类型，并且没有固定数量。

Answer 1

这可以通过在宿主组件中使用 ng-content 指令来实现。 因此，在您的示例中，我的组件标记应如下所示<ng-content><ng-content>

Answer 2

这可以使用带有多槽内容投影的ng-content轻松实现（ Angular 文档）：

<div class="container">
  <ng-content select="h1"></ng-content>
</div>
<div class="container">
  <ng-content select="p"></ng-content>
</div>