ionic3 tabs切换子页面详解（包括默认进入切换到某一子页面，或者在子页面触发事件切换）

本文链接：https://blog.youkuaiyun.com/qq_37705048/article/details/87100093

本文介绍如何在Ionic应用中设置Tabs组件默认显示特定子页面，以及如何从子页面触发Tabs页面间的切换。通过调整TabsPage组件代码，实现默认选中第二个Tab并显示其内容；同时，介绍在子页面中添加事件处理，使用NavController调用父级Tabs选择方法，实现页面间平滑过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ionic提供了一个tabs的页面，如图:
在这里插入图片描述
一般情况下默认是第一个选中状态，显示第一个子页面
1、当希望进入app后默认出现第二个子页面的内容，并且选中第二个tab，在tabs页面如下
tabs.html:

<ion-tabs #myTabs> <!--和tabs.ts中的@ViewChild('myTabs') tabRef: Tabs 对应-->
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

tab.ts:

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

import { PlanPage } from '../plan/plan';
import { ClassPage } from '../class/class';
import { HomePage } from '../home/home';
import { MinePage } from '../mine/mine';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  @ViewChild('myTabs') tabRef: Tabs;
  canShow: boolean = true;
  tab1Root = HomePage;
  tab2Root = ClassPage;
  tab3Root = PlanPage;
  tab4Root = MinePage;

  constructor() {
  }
  ionViewDidEnter(){
    this.tabRef.select(2);
  }
  ngOnInit(){
    
    // this.canShow = true;
  }
}

this.tabRef.select(index)来控制需要默认进入显示那个子页面
2、要是不通过tabs的图标点击，而是在子页面中的事件来让tabPage切换，既图如下，需要点击’进入课程’按钮进入第二个页面:
在这里插入图片描述
通过在子页面的添加一个toClass的事件：

toClass(){
  this.navCtrl.parent.select(1);
 }

调用父级页面选择索引为’1’的子页面,成功后如下图:
在这里插入图片描述