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’的子页面,成功后如下图: