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

use*_*648 5 javascript angular

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

<div class="Modal">
    <div class="header"></div>
    <div class="body">{{content}}</div>
    <div class="footer"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

我无法将HTML实际传递给内容,只是文本.如何创建一个组件,以便父组件可以传入它想要的任何HTML?如果我想在页脚中添加n个按钮,每个按钮都有自己的回调怎么办?我有更好的方法吗?

Mad*_*jan 7

你在寻找什么 ng-content

 <div class="Modal">
   <div class="header"></div>
   <div class="body">
     <ng-content></ng-content>
   </div>
   <div class="footer"></div>
 </div>
Run Code Online (Sandbox Code Playgroud)

并且您可以将任何HTML内容直接传递到您的组件中.假设您的组件名称是my-modal,您可以像下面一样使用它,

  <my-modal>
     <<HTML content :  this will be replaced in the ng-content area >>
  </my-modal>
Run Code Online (Sandbox Code Playgroud)

希望这可以帮助!!