Angular 是否可以将ng2引导动态选项卡组件中的内容设置为模板？

我正在使用ng2引导动态选项卡，我想知道是否可以将选项卡中的内容设置为模板或单独的组件

因此，在文档中的示例中，您设置了如下选项卡数组

public tabs: any[] = [
{title: 'Dynamic Title 1', content: 'Dynamic content 1'},
{title: 'Dynamic Title 2', content: 'Dynamic content 2', disabled: true},
{title: 'Dynamic Title 3', content: 'Dynamic content 3', removable: true}

])

我想将内容设置为模板或单独的组件。这可能吗？请提供一个例子。谢谢

来自中的示例

您的组件如下所示：

---

您可以编写任何组件，并将其选择器放在选项卡标记中

，这要感谢Günter Zöchbauer链接到文章。这为我完成任务提供了足够的方向。我使用的是Angular2V2.4.1，因此我的解决方案与另一篇文章中介绍的略有不同。当我把我的解决方案更完整地放在一起时，我会发布更多关于我的解决方案的信息。

我找到的解决问题的唯一方法是将内容保留为空字符串，即{title:'someTab'，content:'}，然后在模板中使用switch语句，使用选项卡的标题选择要为特定选项卡显示的组件

例如： 在app.component.ts文件中：

  public tabs: any[] = [
{title: 'TabA', content:  ''},
{title: 'TabB', content: '', },
{title: 'TabC', content: '', },

])

在模板中：

<tabset>
    <tab heading="Static title">Static content</tab>
    <tab *ngFor="let tabz of tabs"
         [heading]="tabz.title"
         [active]="tabz.active"
         (select)="tabz.active = true"
         (deselect)="tabz.active = false"
         [disabled]="tabz.disabled"
         [removable]="tabz.removable"
         (removed)="removeTabHandler(tabz)"
         [ngSwitch]="tabz.title">

  <tab-a-component *ngSwitchCase="'TabA'" ></tab-a-component>
  <tab-b-component *ngSwitchCase="'TabB'" ></tab-b-component>
  <tab-c-component *ngSwitchCase="'TabC'" ></tab-c-component>

    </tab>
  </tabset>

静态内容

，您还可以使用

createEmbeddedView（）

而不是

createElement

，并使用

TemplateRef

（来自

…

）为数组中的每个元素创建一个类似于链接答案的元素。感谢您的评论。我看到了链接的线程，不确定它是否是我正在寻找的解决方案。我正在仔细研究这一可能的解决办法。我会在找到解决方案后发表评论。我可以看到如何以这种方式构建选项卡，但这是如何动态的？我需要传递选项卡，它是选项卡数组中的组件，而不是在标记中静态声明它。

<tabset>
    <tab heading="Static title">Static content</tab>
    <tab *ngFor="let tabz of tabs"
         [heading]="tabz.title"
         [active]="tabz.active"
         (select)="tabz.active = true"
         (deselect)="tabz.active = false"
         [disabled]="tabz.disabled"
         [removable]="tabz.removable"
         (removed)="removeTabHandler(tabz)"
         [ngSwitch]="tabz.title">

  <tab-a-component *ngSwitchCase="'TabA'" ></tab-a-component>
  <tab-b-component *ngSwitchCase="'TabB'" ></tab-b-component>
  <tab-c-component *ngSwitchCase="'TabC'" ></tab-c-component>

    </tab>
  </tabset>