Question

我正在使用ng2-bootstrap动态标签，我想知道是否可以将标签中的内容设置为模板或单独的组件。

因此，在文档的示例中，您可以像这样设置一个标签数组。

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}

];

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

Answer 1

来自ng2-bootstrap

中的示例

<tabset>
<tab heading="component tab title">
     Your component goes here:
     <your-component></your-component>
</tab>
</tabset>

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

中

Answer 2

感谢GünterZöchbauer链接到帖子Angular 2 dynamic tabs with user-click chosen components。这为我提供了完成任务的足够方向。我正在使用Angular2 v2.4.1，所以我的解决方案与其他帖子中提供的解决方案略有不同。当我把它完全放在一起时，我会更多地发布我的分辨率。

Answer 3

我想出解决问题的唯一方法是将内容保留为空字符串，即{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>

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

3 个答案: