angular - 如何将html元素注入(inject)自定义组件

Question

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

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

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

非常感谢你!

Answer 1

ng-content 将有助于创建可配置的组件。您需要在 app-card 组件内部使用。放置在 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 中呈现。有关更多信息，请搜索 angular 中的内容投影