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 元素。

Answer 1

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

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

-For more info