Ionic 3启用懒加载时，从单页返回标签页特定视图的实现问题

嘿，我来帮你搞定这个导航难题！在你的Tabs项目里，既然已经用setRoot把单页设为了根导航，那返回时就得重新把Tabs页面设回根导航，同时传递参数指定要激活的标签。下面给你两种实用的实现方式：

方式一：通过标签索引指定目标页面 #

这种方式适合你清楚目标标签在Tabs中的位置（索引从0开始）。

1. 在SinglePage中编写返回方法 #

import { App } from 'ionic-angular';

constructor(private app: App) {}

goBackToTargetTab() {
  // 这里传入你要跳转的标签索引，比如要回到第2个标签就传1
  this.app.getRootNav().setRoot('TabsPage', { selectedIndex: 1 });
}

2. 在TabsPage中接收参数并激活对应标签 #

首先在模板里给ion-tabs添加一个引用：

<ion-tabs #myTabs>
  <ion-tab [root]="tab1Root" tabTitle="首页" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="我的" tabIcon="person"></ion-tab>
  <!-- 其他标签页 -->
</ion-tabs>

然后在TS文件里处理参数：

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

@ViewChild('myTabs') myTabs: Tabs;

constructor(private navParams: NavParams) {}

ionViewDidLoad() {
  // 获取传递过来的标签索引
  const targetIndex = this.navParams.get('selectedIndex');
  if (targetIndex !== undefined) {
    // 激活指定标签
    this.myTabs.select(targetIndex);
  }
}

方式二：通过页面名称指定目标页面（更直观） #

如果不想记索引，直接用目标标签对应的页面名称来定位会更清晰。

1. 在SinglePage中编写返回方法 #

goBackToTargetTab() {
  // 传入目标标签对应的页面名称，比如'Tab2Page'
  this.app.getRootNav().setRoot('TabsPage', { targetPage: 'Tab2Page' });
}

2. 在TabsPage中处理参数 #

先定义你的标签页面数组（如果还没定义的话）：

tabPages = [
  { root: 'Tab1Page', title: '首页', icon: 'home' },
  { root: 'Tab2Page', title: '我的', icon: 'person' },
  { root: 'Tab3Page', title: '设置', icon: 'settings' }
];

然后在ionViewDidLoad里找到对应索引并激活：

ionViewDidLoad() {
  const targetPage = this.navParams.get('targetPage');
  if (targetPage) {
    // 找到目标页面对应的标签索引
    const targetIndex = this.tabPages.findIndex(page => page.root === targetPage);
    if (targetIndex !== -1) {
      this.myTabs.select(targetIndex);
    }
  }
}

关键注意点 #

• 一定要操作根导航器（this.app.getRootNav()），因为你之前用setRoot替换了根导航，普通的navCtrl.push或pop没法回到Tabs容器。
• 确保TabsPage里的@ViewChild正确获取到了Tabs组件的引用，这样才能调用select方法切换标签。

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