如何將通用HTML傳遞給Angular 2組件？

Question

我想制作一個可以容納任何東西的通用模態組件，從文本到圖像/按鈕等。如果我做這樣的事情：

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

我無法將HTML實際傳遞給內容，只是文本。 如何創建一個組件，以便父組件可以傳入它想要的任何HTML？ 如果我想在頁腳中添加n個按鈕，每個按鈕都有自己的回調怎么辦？ 我有更好的方法嗎？

Answer 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>

希望這可以幫助！！

如何將通用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