Angular 4 : How to make dynamic tabs using ng-boostrap api

Question

我正在尝试开发一个选项卡 View ，我可以在运行时动态加载选项卡。我最近开始使用 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 来动态制作组件。

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

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

Answer 1

尝试

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

这将防止元素被破坏