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

发布时间：2020-12-17 18:06:24 所属栏目：安全来源：网络整理

导读：我正在尝试开发一个标签视图,我可以在运行时动态加载标签.我最近开始使用ng-boostrap中的ngb-tabset,发现它非常有用,除了我似乎无法动态创建标签. Long2know几乎完全创造了我一直在努力实现的here. 目前的挑战是提供此示例的数据.理想情况下,如果可以创建这

我正在尝试开发一个标签视图,我可以在运行时动态加载标签.我最近开始使用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动态创建组件时无法使用的选项卡内容.

我只是想知道是否有其他方法可能类似于实现这一目标？我知道有可能用路由器来实现这一点,但是我已经投入了更多的时间用于这种方法,所以它会更受欢迎,但我对任何事情持开放态度.

解决方法

尝试

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

这样可以防止元素被破坏

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!