Ionic 2+中从IntroPage跳转至指定Tab的实现问询

嘿，我看你已经试了三种方法来实现IntroPage上BUY/SELL按钮跳转到Tabs页面的对应标签，这里给你梳理下可行的方案，帮你搞定这个跳转问题：

先明确前提：IntroPage的位置 #

首先得搞清楚你的IntroPage是独立的启动页（不在Tabs的导航栈里），还是Tabs某个标签页的子页面——这会直接影响哪种方法生效：

如果IntroPage是独立启动页（比如app启动直接打开它）

你的方法A this.navCtrl.setRoot(TabsPage); 只能跳转到Tabs的默认标签，没法直接指定目标标签，咱们可以给它加个参数传递来优化：

1. 在IntroPage的按钮点击事件里，传递目标标签的索引：

// BUY按钮点击，假设BUY是Tabs的第1个标签（索引0）
onBuyBtnClick() {
  this.navCtrl.setRoot(TabsPage, { targetTabIndex: 0 });
}

// SELL按钮点击，假设SELL是Tabs的第2个标签（索引1）
onSellBtnClick() {
  this.navCtrl.setRoot(TabsPage, { targetTabIndex: 1 });
}

注意：Tabs的索引是从0开始计数的，你之前写的select(2)对应第三个标签，要确认你的SELL标签实际对应的索引哦！

2. 在TabsPage里接收参数并选中对应标签：

import { NavParams } from 'ionic-angular';
import { Tabs } from 'ionic-angular';

constructor(
  private navParams: NavParams,
  private tabs: Tabs
) {}

ionViewDidEnter() {
  // 获取传递过来的目标标签索引
  const targetIndex = this.navParams.get('targetTabIndex');
  // 如果有传递参数，就选中对应标签
  if (targetIndex !== undefined) {
    this.tabs.select(targetIndex);
  }
}

如果IntroPage是Tabs某个标签页的子页面

那你的方法B和C是可行的，但要注意两个坑：

• 先确认this.navCtrl.parent确实是Tabs实例：可以先在按钮点击事件里打印console.log(this.navCtrl.parent)，如果输出是Tabs对象，再继续用
• 确认标签索引正确：比如你的SELL标签如果是第二个标签，索引应该是1，而不是2（除非你有三个标签）

优化后的封装方法可以写成这样：

import { Tabs } from 'ionic-angular';
import { NavController } from 'ionic-angular';

constructor(private navCtrl: NavController) {}

selectTab(index: number) {
  const tabsInstance = this.navCtrl.parent as Tabs;
  // 先判断是不是Tabs实例，避免报错
  if (tabsInstance) {
    tabsInstance.select(index);
  } else {
    console.log('当前页面的父导航不是Tabs');
  }
}

// 调用的时候
onBuyClick() {
  this.selectTab(0);
}

onSellClick() {
  this.selectTab(1);
}

额外提醒 #

如果是Ionic 4及以上版本，导航API换成了Router，那跳转方式会变成：

// 跳转到BUY标签
this.router.navigate(['/tabs/buy']);
// 跳转到SELL标签
this.router.navigate(['/tabs/sell']);

不过看你用的是navCtrl，应该是Ionic 3或更早版本，前面的方法完全适用~

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