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

Question

我正在尝试在 Angular 中创建一个可重用的选项卡组件，如下所示：

<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，后者只是任何内容的持有者。它可能只是文本或按钮或其他任何东西。在这种情况下，您将导入 tabs 组件并像上面显示的那样使用它。

问题是，无论您放置在组件的开始标签和结束标签内的任何内容，角度都会阻塞。它的行为不像接受冷节点的普通 HTML 元素。

标签： angularhtmlangular-components

Answer 1

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

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

-了解更多信息