NG-ZORRO中Tabs组件ngOnInit只执行一次的问题解析

问题现象

在使用NG-ZORRO的Tabs组件时，开发者发现一个特殊现象：当切换不同标签页时，组件内的ngOnInit生命周期钩子仅在第一次进入该标签页时执行，后续再次切换回同一标签页时，ngOnInit不会再次触发。

问题本质

这种现象实际上是Angular框架的设计特性，而非NG-ZORRO的缺陷。当使用Tabs组件时，默认情况下各个标签页的内容会被保留在DOM中（即使不可见），只是通过CSS隐藏显示。因此组件实例不会被销毁和重建，自然ngOnInit也不会重复执行。

解决方案

方案一：使用*ngIf条件渲染

最推荐的解决方案是通过*ngIf指令配合标签切换事件，动态控制组件的创建和销毁：

@Component({
  template: `
    <nz-tabset (nzSelectChange)="activeIndex = $event.index">
      <nz-tab nzTitle="Tab 1">
        <ng-template nz-tab>
          <app-tab-content *ngIf="activeIndex === 0"></app-tab-content>
        </ng-template>
      </nz-tab>
      <nz-tab nzTitle="Tab 2">
        <ng-template nz-tab>
          <app-tab-content *ngIf="activeIndex === 1"></app-tab-content>
        </ng-template>
      </nz-tab>
    </nz-tabset>
  `
})
export class TabContainer {
  activeIndex = 0;
}

这种方式的优势在于：

1. 完全符合Angular的生命周期管理
2. 每次切换标签页都会创建新实例
3. 不活跃的标签页组件会被完全销毁，释放资源

方案二：利用路由懒加载

对于复杂场景，可以考虑结合Angular路由实现：

const routes: Routes = [
  {
    path: '',
    component: TabsContainer,
    children: [
      { path: 'tab1', loadChildren: () => import('./tab1.module').then(m => m.Tab1Module) },
      { path: 'tab2', loadChildren: () => import('./tab2.module').then(m => m.Tab2Module) }
    ]
  }
];

路由方案的优点：

1. 实现真正的模块懒加载
2. 各标签页完全独立
3. 支持浏览器历史记录导航

最佳实践建议

1. 简单场景：使用*ngIf方案最为轻量便捷
2. 复杂应用：考虑路由方案，便于后期扩展
3. 性能敏感：注意频繁创建销毁组件的开销，可适当加入缓存策略
4. 状态管理：对于需要保持的状态，建议使用服务(Service)进行管理而非依赖组件实例

总结

NG-ZORRO的Tabs组件默认行为符合Angular的设计哲学，理解这一特性有助于开发者根据实际需求选择合适的实现方案。通过*ngIf或路由机制，可以灵活控制组件的生命周期，满足不同业务场景下的需求。