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

Question

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

5

我希望制作一个通用的模态框组件，可以容纳任何内容，从纯文本到图像/按钮等。如果我这样做：

<div class="Modal">
    <div class="header"></div>
    <div class="body">{{content}}</div>
    <div class="footer"></div>
</div>

我无法将HTML直接传递到内容中，只能传递文本。我该如何创建一个组件，使得父组件可以传入任何想要的HTML呢？如果我想向页脚添加n个按钮，每个按钮都有自己的回调函数怎么办？我应该采用更好的方式吗？

- user3715648

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Madhu Ranjan · Accepted Answer

你需要的是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>

希望这能帮到您！