如何在Ionic 3中从无标签页页面跳转至指定索引的标签页并传参？

嘿，这问题我熟！要实现从无标签页的EatPage跳转到TabsPage的索引2标签页，同时传递参数，其实只需要两步：把标签索引也加入导航参数，再在TabsPage里接收参数并切换标签。

第一步：修改EatPage的跳转代码，添加标签索引参数 #

你原来的代码已经在传递docId了，现在只需要把目标标签的索引（这里是2）也作为参数传过去：

opentab2(id: string) {
  this.navCtrl.push('TabsPage', { 
    docId: id,
    selectedTab: 2 // 新增：指定要跳转的标签索引
  });
}

第二步：在TabsPage中接收参数并切换标签 #

首先，你需要在TabsPage的组件里获取传递过来的参数，然后调用标签栏的切换方法。要先通过ViewChild获取标签栏的实例，再在页面初始化钩子中处理：

1. TabsPage的TypeScript代码

import { Component, ViewChild } from '@angular/core';
import { NavParams, Tabs } from 'ionic-angular';

@Component({
  selector: 'page-tabs',
  templateUrl: 'tabs.html'
})
export class TabsPage {
  @ViewChild('myTabs') tabRef: Tabs; // 获取标签栏实例
  docId: string;

  constructor(private navParams: NavParams) {}

  ionViewWillEnter() {
    // 接收传递的参数
    this.docId = this.navParams.get('docId');
    const targetTabIndex = this.navParams.get('selectedTab');
    
    // 如果有指定的标签索引，就切换过去
    if (targetTabIndex !== undefined) {
      this.tabRef.select(targetTabIndex);
    }
  }
}

2. TabsPage的HTML模板

给<ion-tabs>添加一个模板引用变量#myTabs，这样上面的ViewChild才能获取到标签栏实例：

<ion-tabs #myTabs>
  <ion-tab [root]="tab1Root" tabTitle="标签1" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="标签2" tabIcon="star"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="标签3" tabIcon="settings"></ion-tab>
</ion-tabs>

额外说明：如果目标标签页需要使用docId #

如果你需要在索引2对应的标签页面（比如Tab3Page）中使用传递的docId，可以在该页面的constructor里通过NavParams获取：

import { NavParams } from 'ionic-angular';

constructor(private navParams: NavParams) {
  const docId = this.navParams.get('docId');
  // 在这里使用docId做你需要的操作
}

这样就能完美实现你要的效果：从EatPage跳转到TabsPage的第3个标签（索引2），同时把docId参数带过去啦！

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