如何将html元素注入自定义组件

Question

我需要通过模板文件将 html 元素传递到自定义创建的组件中。假设我有一个名为 的组件<app-card></app-card>，它代表具有特定样式的卡片布局，但我不想每次需要时都从头开始创建该组件。因此，我认为为此元素创建自定义 UI 组件是一个很好的方法。但现在当我使用这个组件时，我想向其中传递一些其他 html 元素，例如 H2 和一些 p 标签：

<app-card>
  <h2>New child I passed</h2>
  <p>And another one</p>
</app-card>

当我测试时，这种方法行不通。有谁知道我如何实现嵌套组件？

非常感谢！

Answer 1

ng-content 将有助于创建可配置组件。您需要在 app-card 组件内部使用。已放置在应用程序卡的开始和结束标签内的内容将投影在

应用卡组件

<div>
    <ng-content></ng-content>
</div>

自定义组件

<app-card>
  <h2>New child I passed</h2>
  <p>And another one</p>
</app-card>

这里 h2 和 p 标签将在 ng-content 中渲染。有关更多信息，请搜索角度内容投影