Ionic：在不同组件中获取当前激活标签页

嘿，我之前做项目时也遇到过这个需求，其实利用Ionic的Tabs控制器就能轻松解决，给你两个实用的方案：

方案一：通过navCtrl.parent直接获取 #

既然你已经知道用this.navCtrl.parent.select(2)切换标签页，那这个navCtrl.parent其实就是Tabs实例，直接调用它的getSelected()方法就能拿到当前激活的标签页对象：

ionViewWillEnter() {
  // 类型断言确保TypeScript不报错
  const tabsInstance = this.navCtrl.parent as any;
  const activeTab = tabsInstance.getSelected();
  
  // 获取标签页索引（从0开始计数）
  console.log('当前激活标签页索引:', activeTab.index);
  // 还能拿到标签的标题、ID等信息
  console.log('当前标签页标题:', activeTab.tabTitle);
}

如果只需要索引，也可以直接访问selectedIndex属性，更简洁：

console.log('当前激活索引:', (this.navCtrl.parent as any).selectedIndex);

方案二：通过ViewChild获取Tabs组件实例（Ionic 4+推荐） #

如果你的项目是Ionic 4及以上版本，更推荐用Angular的ViewChild来获取Tabs组件实例，这样代码更清晰，类型也更安全：

1. 先在组件类里引入依赖：

import { ViewChild } from '@angular/core';
import { Tabs, Tab } from '@ionic/angular';

2. 在模板里给ion-tabs添加一个模板引用变量：

<ion-tabs #myTabs>
  <ion-tab-bar slot="bottom">
    <!-- 你的标签页按钮配置 -->
    <ion-tab-button tab="tab1">
      <ion-icon name="home"></ion-icon>
      <ion-label>首页</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="tab2">
      <ion-icon name="person"></ion-icon>
      <ion-label>我的</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

3. 在组件类里获取实例并使用：

@ViewChild('myTabs') tabs: Tabs;

ionViewWillEnter() {
  const activeTab: Tab = this.tabs.getSelected();
  console.log('当前激活标签页索引:', activeTab.index);
  console.log('当前标签页ID:', activeTab.tabId);
}

这样不管是获取标签页的索引、标题还是实例本身都很方便，而且在Ionic 5+版本里这个API是稳定支持的。

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