Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Angular 4:如何使用ng-boostrap api制作动态标签大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试开发一个标签视图,我可以在运行时动态加载标签.我最近开始使用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>

这样可以防止元素被破坏

大佬总结

以上是大佬教程为你收集整理的Angular 4:如何使用ng-boostrap api制作动态标签全部内容,希望文章能够帮你解决Angular 4:如何使用ng-boostrap api制作动态标签所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。