我需要通过模板文件将 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>
当我测试它时,这种方式行不通。有谁知道我如何实现嵌套组件?
非常感谢你!
最佳答案
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 中的内容投影
关于angular - 如何将html元素注入(inject)自定义组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55586380/