Angular组件中是否可以包含HTML内容？

Question

我试图在Angular中创建一个可重用的tabs组件，如下所示：

<ng-tabs>
    <ng-tab>
        <div class="title">title</div>
        <div class="content">content</div>
    <ng-tab>
    <ng-tab>
        <div class="title">title</div>
        <div class="content">content</div>
    <ng-tab>
</ng-tabs>

在这种情况下，ng-tabs是将切换控件传递给嵌套组件ng-tab的组件，而后者只是任何内容的持有者。它可能只是文本，按钮或其他内容。在这种情况下，您将导入选项卡组件并像上面显示的那样使用它。

问题在于，无论您放置在组件的打开和关闭标签内的什么，角度组件都将阻塞。它的行为不像接受冷节点的普通HTML元素。

Answer 1

我认为您需要将<ng-content></ng-content>添加到ng-tab.component.html中，以在其中显示标签的内容：

<div class="myTab">
   <ng-content></ng-content>
</div>

-For more info