在ng-zorro中组件tabs添加懒加载标签,激活该懒加载标签后显示空白,无法渲染组件。

新手上路,请多包涵

问题描述

图片描述
图片描述

问题出现的环境背景及自己尝试过哪些方法

与官网实例上的代码一致,在ng-template中增加了nz-tab属性,激活
该tab标签后没有渲染到performance-project-mode组件。当把ng-template标签移除,直接显示performance-project-mode时则可正常渲染。

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

 <nz-tabset>
            <!-- 基本信息 -->
            <nz-tab [nzTitle]="baseInformation">
                <ng-template #baseInformation>
                    <i class="anticon anticon-file-text"></i>{{l('BaseInformation')}}
                </ng-template>
               <div>test</div>
            </nz-tab>
            <!--考核方式设置-->
            <nz-tab nzTitle="performanceMode">
                <ng-template #performanceMode>
                    <i class="anticon anticon-setting"></i>{{l('PerformanceModeSetting')}}
                </ng-template>
                <ng-template nz-tab>
                        <performance-project-mode></performance-project-mode>
                </ng-template>
            </nz-tab>
            <!--考核对象设置-->
            <nz-tab [nzTitle]="performanceObject">
                <ng-template #performanceObject>
                    <i class="anticon anticon-team"></i>{{l('PerformanceProjectObject')}}
                </ng-template>

            </nz-tab>
</nz-tabset>

你期待的结果是什么?实际看到的错误信息又是什么?

在激活该tab的时候才加载该组件。

阅读 5k
1 个回答
新手上路,请多包涵

已解决,是ng-zorro的版本问题,我本地版本是1.8.0,需要升级到7.3.3才能支持这个功能。在官方文档
处发现切换版本到1.8.0 Tabs这个组件时没有发现懒加载的选项。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题