Ionic3中super-tabs使用this.navCtrl.parent.select()切换标签无效的问题咨询

我懂你现在的困扰——在Super-Tabs组件里用原生Tabs的切换方法完全不管用对吧？这是因为Super-Tabs有自己独立的控制逻辑，和Ionic原生Tabs的导航结构不一样，所以this.navCtrl.parent.select(0)这种原生方法自然失效了。

给你一套靠谱的解决方案，步骤很清晰：

1. 导入并注入SuperTabs控制器 #

首先在你的ChatsPage组件里，先导入SuperTabsController服务，然后在构造函数里注入它：

import { Component } from '@angular/core';
import { SuperTabsController } from 'ionic2-super-tabs';

@Component({
  selector: 'page-chats',
  templateUrl: 'chats.html'
})
export class ChatsPage {

  constructor(private superTabsCtrl: SuperTabsController) {}

  // 你的其他业务代码...
}

2. 调用切换方法实现标签跳转 #

接下来，在你需要触发切换的地方（比如按钮点击事件、某个业务逻辑完成后），调用selectTab方法就可以了。你可以选择两种定位方式：

方式一：通过标签索引切换 #

如果你的ContactPage是第一个标签（索引为0），直接传入索引即可：

switchToContacts() {
  this.superTabsCtrl.selectTab(0);
}

方式二：通过标签ID切换（更推荐） #

为了避免后续调整标签顺序导致切换出错，你可以给每个super-tab设置唯一的id：

<super-tabs tabsHighlight="true" tabsPlacement="top" [selectedTabIndex]="mySelectedIndex" >
  <super-tab id="contacts-tab" [root]="contactsRoot" title="My Team" ></super-tab>
  <super-tab id="chats-tab" [root]="chatsRoot" title="Chats" ></super-tab>
  <!-- 其他标签组件... -->
</super-tabs>

然后在ChatsPage里通过id来精准切换：

switchToContacts() {
  this.superTabsCtrl.selectTab('contacts-tab');
}

这样就能完美实现从ChatsPage切换到ContactPage的需求啦。

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