Angular 4：如何使用 ng-bootstrap api 制作动态标签答案

【问题标题】：Angular 4: How to make dynamic tabs using ng-boostrap apiAngular 4：如何使用 ng-bootstrap api 制作动态标签
【发布时间】：2017-12-22 13:08:40
【问题描述】：

我正在尝试开发一个选项卡视图，以便在运行时动态加载选项卡。我最近开始使用 ng-boostrap 中的 ngb-tabset，发现它非常有用，但我似乎无法动态创建选项卡。

Long2know 几乎完全创建了我一直在尝试实现的 here. 当前的挑战是为这个示例提供数据以使其正常工作。理想情况下，如果可以创建这样的东西

<ngb-tabset  (tabChange)="tabChange($event)" [activeId]="activeId">
    <ngb-tab *ngFor="let comp of components; [id]="start" title="tab1">
        <template ngbTabContent >
            <div> *createTab="comp" </div>
        </template>
    </ngb-tab>
</ngb-tabset>

其中“组件”是一组不同的组件。因此，createTab 将是一个指令，它使用 factoryResolver 和 ViewContainerRef 来动态制作组件。

如果我尝试这样的事情，我不会收到错误，但选项卡视图根本不会显示。查看ngb-tabset 的源代码后，我意识到它使用@ContentChildren 来获取选项卡内容，这不适用于使用ViewContainerRef 动态创建组件。

我只是想知道是否有其他类似的方法可以实现这一目标？我知道可能有办法用路由器来实现这一点，但是我已经在这种方法上投入了更多的时间，所以它会是首选，但我对任何事情都持开放态度。

【问题讨论】：

标签： angular tabs ng-bootstrap

【解决方案1】：

试试

<ngb-tabset [destroyOnHide]="false">
...
</ngb-tabset>

这将防止元素被破坏

【讨论】：