Ng-Zorro中的tabs导航

在做项目的时候发现，当tabs有两种情况，如果tabs中的list是通过异步请求得到，那么它本身当前激活 tab 面板的 序列号为0，会自动调用tab面板改变的回调函数，但如果tabs中的数据是直接赋予的数据，那么就不会存在这种情况，不会调用tab面板改变的回调函数。

目录

一、tabs导航第一种情况

二、tabs导航第二种数据

总结

---

一、tabs导航第一种情况

第一种情况tabs导航的选项为tabsIfy.list直接渲染所得，这种情况不会调用nzSelectedIndexChange回调函数

tabsIfy = {
        selectedIndex: 0,
        list: <any>[
            { text: '未完成', type: '0' },
            { text: '已完成', type: '1' },
            { text: '未通过', type: '2' },
            { text: '已通过', type: '3' },
        ],
        onChangeIndex: (index: any) => {
        },
    };

<nz-tabset
            [(nzSelectedIndex)]="tabsIfy.selectedIndex"
            (nzSelectedIndexChange)="tabsIfy.onChangeIndex($event)"
            [nzTabBarStyle]="{ 'height.px': '50' }"
        >
            <ng-container *ngFor="let item of tabsIfy.list"> <nz-tab [nzTitle]="item.text"></nz-tab></ng-container>
        </nz-tabset>

二、tabs导航第二种数据

当tabsIfy.list数据本身为[],在初始化声明周期的时候获取服务返回的数据进行赋值，此时当加载页面时会自动调用nzSelectedIndexChange这个事件从而出发调取tabsIfy.onChangeIndex这个方法。

tabsIfy = {
        selectedIndex: 0,
        list: <any>[],
        onChangeIndex: (index: any) => {
        },
    };

         onGetPersonList(){
            const params = {};
            this.service.staffSelectPageByOrgId(params).subscribe(data => {
                this.tabsIfy.list = data.result;
            });
        },

---

总结

注意区分导航tabs栏数据是否是异步渲染服务器获取，如果为服务器获取则会自动调用tabs界面变更函数。