如何設置在<ng-content>標籤內呈現的內容？

Question

我看到很多關於transclution的文章，但是有很多解決虛構問題的地方。有人可以告訴我在<ng-content></ng-content>標籤中應該生成什麼內容？

Answer 1

Transclusion是一種將HTML模板從該組件外部添加到角度組件模板的方法。

一個例子解釋這個概念遠遠比我更清楚：

<custom-component> 
    <!-- HTML template added to the custom-component's template through transclusion --> 
    <div class="row"> 
    <div class="col-sm-12> 
     <p>My HTML template</p> 
    </div> 
    </div> 
    <!-- End of the HTML template --> 
</custom-component> 

爲了使transclusion工作，正如你指出了這一點，你需要使用NG-內容標籤。此標記指示Angular應該在組件模板中呈現外部HTML模板的位置。

想象一下以下的自定義組件模板：

<div class="wrapper"> 
    <div class="container"> 
    <section> 
     <ng-content></ng-content> 
    </section> 
    <footer> 
     <!-- Something --> 
    </footer> 
    </div> 
</div> 

NG-內容將被替換這樣的：

<div class="wrapper"> 
    <div class="container"> 
    <section> 
     <!-- HTML template added to the custom-component's template through transclusion --> 
     <div class="row"> 
     <div class="col-sm-12> 
      <p>My HTML template</p> 
     </div> 
     </div> 
     <!-- End of the HTML template --> 
    </section> 
    <footer> 
     <!-- Something --> 
    </footer> 
    </div> 
</div> 

要回答你的問題，我要說的是，你可以在「設置什麼渲染在ng-content標籤內部「通過在角度組件的開始和結束標籤內添加一些HTML。