組件內的Angular2 Html

Question

我想創建一個像模板一樣的組件。 例如，而不是在任何地方寫這個：

<div class="myClass">
    <div class="myHeader" id="headerId"> Title </div>
    <div class="myContent" id="contentId"> <<Some HTML code>> </div>
</div>

我想使用像這樣的組件：

<my-component title="Title" headerID=headerId contentID=contentID>
    <<Some HTML code>>
</my-component>

我如何在Angular2中實現類似的東西？

Answer 1

在組件中使用<ng-content></ng-content> 。

my.component.html

<div class="myClass">
    <div class="myHeader" id="headerId"> Title </div>
    <div class="myContent" id="contentId"> <ng-content></ng-content> </div>
</div>

parent.component.html

<my-component title="Title" headerID=headerId contentID=contentID>
    <<Some HTML code>>
</my-component>

<my-component></mycomponent>將以<ng-content></ng-content>呈現