组件中的Angular2 Html

Angular2 Html inside a Component

本文关键字：Html Angular2 组件      更新时间：2023-09-26

我想创建一个像模板一样的组件。例如，与其到处这样写:

<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中实现这样的东西?

在组件中使用<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>

相关文章：