如何将通用HTML传递给Angular 2组件？

Question

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>

I'm not able to actually pass HTML into content, just text. 我无法将HTML实际传递给内容，只是文本。 How can I create a component such that the parent component can pass in whatever HTML it wants? 如何创建一个组件，以便父组件可以传入它想要的任何HTML？ What if I wanted to add n number of buttons to the footer, each with it's own callback? 如果我想在页脚中添加n个按钮，每个按钮都有自己的回调怎么办？ Is there a better way I should be doing this? 我有更好的方法吗？

Answer 1

What you are looking for is ng-content 您正在寻找的是ng-content

 <div class="Modal">
   <div class="header"></div>
   <div class="body">
     <ng-content></ng-content>
   </div>
   <div class="footer"></div>
 </div>

and you may pass any HTML content directly into your component. 并且您可以将任何HTML内容直接传递到您的组件中。 Lets say your component name is my-modal , you may use it like below, 假设您的组件名称是my-modal ，您可以像下面一样使用它，

  <my-modal>
     <<HTML content :  this will be replaced in the ng-content area >>
  </my-modal>

Hope this helps!! 希望这可以帮助！！

如何将通用HTML传递给Angular 2组件？

问题描述

1 个解决方案

解决方案1
7 已采纳 2016-08-22 18:58:41

如何将通用HTML传递给Angular 2组件？

问题描述

1 个解决方案

解决方案1 7 已采纳 2016-08-22 18:58:41

解决方案1
7 已采纳 2016-08-22 18:58:41