组件内的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>