如何为ngx-bootstrap标签页设置组件初始化触发条件？

我之前在项目里刚好遇到过一模一样的问题！ngx-bootstrap 的 active 属性确实只是控制组件视图的显示和隐藏，但组件实例其实在页面初始化的时候就已经创建了，所以哪怕标签页没选中，ngOnInit 照样会执行，后台逻辑该跑还是跑。下面几个实用的解决方法，你可以根据自己的场景选：

方法1：结合 *ngIf 和标签页的选中事件 #

这是最简单直接的方式，通过 *ngIf 控制组件的渲染时机，只有当标签页被选中时才渲染组件，从而触发 ngOnInit：

<tabset>
  <!-- 标签页1 -->
  <tab 
    heading="Tab 1" 
    [active]="isTab1Active"
    (select)="isTab1Active = true"
    (deselect)="isTab1Active = false" <!-- 可选：切换走时销毁组件，下次选中重新初始化 -->
  >
    <app-my-component *ngIf="isTab1Active"></app-my-component>
  </tab>

  <!-- 标签页2 -->
  <tab 
    heading="Tab 2" 
    [active]="isTab2Active"
    (select)="isTab2Active = true"
    (deselect)="isTab2Active = false"
  >
    <app-another-component *ngIf="isTab2Active"></app-another-component>
  </tab>
</tabset>

对应的组件类里初始化状态变量：

export class YourTabsComponent {
  isTab1Active = false;
  isTab2Active = false;
}

说明：如果不想切换标签页时销毁组件，可以去掉 (deselect) 事件绑定，这样组件实例会保留，下次切回来不会重新执行 ngOnInit。

方法2：动态加载组件（保留实例，仅首次选中初始化） #

如果希望组件仅在第一次选中标签页时初始化，之后切换回来不重新创建实例，用动态组件加载的方式更合适：

组件类代码 #

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { MyComponent } from './my.component';
import { AnotherComponent } from './another.component';

@Component({
  selector: 'app-tabs-container',
  templateUrl: './tabs-container.component.html'
})
export class TabsContainerComponent {
  // 获取标签页内的容器引用
  @ViewChild('tab1Container', { read: ViewContainerRef }) tab1Container!: ViewContainerRef;
  @ViewChild('tab2Container', { read: ViewContainerRef }) tab2Container!: ViewContainerRef;

  // 标记组件是否已加载
  private tab1Loaded = false;
  private tab2Loaded = false;

  constructor(private cfr: ComponentFactoryResolver) {}

  // 监听标签页切换事件
  onTabChange(event: any) {
    switch (event.tab.heading) {
      case 'Tab 1':
        if (!this.tab1Loaded) {
          // 创建组件工厂并动态加载组件
          const factory = this.cfr.resolveComponentFactory(MyComponent);
          this.tab1Container.createComponent(factory);
          this.tab1Loaded = true;
        }
        break;
      case 'Tab 2':
        if (!this.tab2Loaded) {
          const factory = this.cfr.resolveComponentFactory(AnotherComponent);
          this.tab2Container.createComponent(factory);
          this.tab2Loaded = true;
        }
        break;
    }
  }
}

模板代码 #

<tabset (tabChange)="onTabChange($event)">
  <tab heading="Tab 1">
    <!-- 组件加载容器 -->
    <div #tab1Container></div>
  </tab>
  <tab heading="Tab 2">
    <div #tab2Container></div>
  </tab>
</tabset>

说明：Angular 9+ 启用 Ivy 后，不需要再把动态加载的组件加入 entryComponents，框架会自动识别。

方法3：路由懒加载（适合大型组件/模块） #

如果你的标签页对应的是大型模块，想优化页面加载速度，可以结合 Angular 路由的懒加载功能，只有当导航到对应标签页时才加载组件：

模板代码 #

<tabset>
  <tab 
    heading="Tab 1"
    (select)="navigateToTab('tab1')"
  >
    <router-outlet name="tab1"></router-outlet>
  </tab>
  <tab 
    heading="Tab 2"
    (select)="navigateToTab('tab2')"
  >
    <router-outlet name="tab2"></router-outlet>
  </tab>
</tabset>

组件类代码 #

import { Router } from '@angular/router';

export class TabsContainerComponent {
  constructor(private router: Router) {}

  navigateToTab(tabName: string) {
    // 导航到对应命名路由
    this.router.navigate([{ outlets: { [tabName]: [tabName] } }]);
  }
}

路由配置 #

const routes: Routes = [
  {
    path: '',
    component: TabsContainerComponent,
    children: [
      // 懒加载标签页1对应的模块
      { 
        path: 'tab1', 
        outlet: 'tab1', 
        loadChildren: () => import('./tab1/tab1.module').then(m => m.Tab1Module) 
      },
      // 懒加载标签页2对应的模块
      { 
        path: 'tab2', 
        outlet: 'tab2', 
        loadChildren: () => import('./tab2/tab2.module').then(m => m.Tab2Module) 
      }
    ]
  }
];

说明：这种方式不仅能延迟组件初始化，还能减少初始页面的打包体积，适合复杂的大型应用。

内容的提问来源于stack exchange，提问作者sadra seyfi