我想创建一个可以容纳任何东西的通用模态组件,从文本到图像/按钮等。如果我这样做:
<div class="Modal">
<div class="header"></div>
<div class="body">{{content}}</div>
<div class="footer"></div>
</div>
我无法将HTML实际传递到内容中,只是文本。如何创建一个组件,以便父组件可以传入它想要的任何HTML?如果我想在页脚中添加n个按钮,每个按钮都有自己的回调怎么办?我有更好的方法吗?
答案 0 :(得分:7)
您要找的是ng-content
<div class="Modal">
<div class="header"></div>
<div class="body">
<ng-content></ng-content>
</div>
<div class="footer"></div>
</div>
您可以将任何HTML内容直接传递到您的组件中。
假设您的组件名称为my-modal
,您可以像下面一样使用它,
<my-modal>
<<HTML content : this will be replaced in the ng-content area >>
</my-modal>
希望这会有所帮助!!