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

【问题标题】：How can I pass in generic HTML to an Angular 2 component?如何将通用 HTML 传递给 Angular 2 组件？
【发布时间】：2016-08-23 02:58:41
【问题描述】：

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

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

我实际上无法将 HTML 传递到内容中，只能传递文本。如何创建一个组件，以便父组件可以传入它想要的任何 HTML？如果我想在页脚添加 n 个按钮，每个按钮都有自己的回调怎么办？我应该这样做有更好的方法吗？

【问题讨论】：

标签： javascript angular

【解决方案1】：

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

希望这会有所帮助！

【讨论】：

谢谢。我也刚刚发现 [innerHTML]。您所知道的一种方法比另一种方法有优势吗？
没有检查[innerHTML]，检查那里的绑定是否有效？还要检查是否可以像从 *ngFor 循环一样将局部变量分配给它？如果是这样，我看不出一个比另一个有任何优势。
outerHTML 替换您应用它的元素。 innerHTML 将其添加为子项。
这是一个很好的答案。