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>

中呈现

组件内的Angular2 Html

1 个答案: