如何将通用HTML传递给Angular 2组件？ [英] How can I pass in generic HTML to an Angular 2 component?
问题描述
我想创建一个可以容纳任何内容的通用模态组件，从文本到图像/按钮等。如果我这样做：
I want to make a generic modal component that can hold anything, from just text to images/buttons etc. If I do something like this:
<div class="Modal">
<div class="header"></div>
<div class="body">{{content}}</div>
<div class="footer"></div>
</div>
我无法将HTML实际传递到内容，只是文本。如何创建一个组件，以便父组件可以传入它想要的任何HTML？如果我想在页脚中添加n个按钮，每个按钮都有自己的回调怎么办？我有更好的方法吗？
I'm not able to actually pass HTML into content, just text. How can I create a component such that the parent component can pass in whatever HTML it wants? What if I wanted to add n number of buttons to the footer, each with it's own callback? Is there a better way I should be doing this?
推荐答案
您要找的是 ng-内容
<div class="Modal">
<div class="header"></div>
<div class="body">
<ng-content></ng-content>
</div>
<div class="footer"></div>
</div>
您可以将任何HTML内容直接传递到您的组件中。
假设你的组件名称是 my-modal ，你可以像下面这样使用它，
and you may pass any HTML content directly into your component.
Lets say your component name is my-modal, you may use it like below,
<my-modal>
<<HTML content : this will be replaced in the ng-content area >>
</my-modal>
希望这会有所帮助!!
Hope this helps!!
这篇关于如何将通用HTML传递给Angular 2组件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
