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

问题是 angular 会阻止您在组件的开始和结束标记内放置的任何内容。它的行为不像接受冷节点的普通 HTML 元素。

Answer 1

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

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

-For more info

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

Is it possible to have HTML content inside an Angular Component?

html

angular-components

angular