组件内的Angular2 Html

【问题标题】：Angular2 Html inside a Component组件内的Angular2 Html
【发布时间】：2017-01-10 13:23:22
【问题描述】：

我想创建一个像模板一样的组件。例如，不要到处写这个：

<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 中实现类似的功能？

【问题讨论】：

你试过什么？问题是什么？ <<Some HTML code>> 与问题有什么关系？
我没有尝试任何东西，因为我在 Angular2 方面不是很有经验。我用谷歌搜索了它，但找不到与我想要的类似的东西。我在这里寻找建议。
那你想要什么？期望的行为或结果是什么？如果你只是创建一个简单的组件，它有什么不做你想做的？

标签： javascript html angular

【解决方案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> 中呈现

【讨论】：

这正是我想要的。谢谢！
有没有办法强制延迟加载内容？如果我有条件地在我的组件中包含，即使条件为假，所有内容都会被初始化 - 例如，当内容包含其他一些组件时。