onPageLoaded onPageWillEnter onPageDidEnter onPageWillLeave onPageDidLeave
ionViewLoaded ionViewWillEnter ionViewDidEnter ionViewWillLeave ionViewDidLeavejavascript
上下2種寫法在beta37中都有效html
假如在about頁面中的控制檯中打印頁面加載完成,將要進入,已經進入,將要離開,已經離開java
在about.ts文件夾中ionic
export class AboutPage { ionViewLoaded(){ console.log("about loaded lo") } onPageWillEnter(){ console.log("about will endter") } onPageDidEnter(){ console.log("about did endter") } onPageWillLeave(){ console.log("about will Leave") } onPageDidLeave(){ console.log("about did Leave") } }
下面的例子爲默認第二個tab顯示ui
<ion-tabs #myTabs> <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home" tabBadge="3" tabBadgeStyle="danger"></ion-tab> <ion-tab [root]="tab2Root" tabTitle="關於" tabIcon="information-circle"></ion-tab> <ion-tab [root]="tab3Root" tabTitle="用戶中心" tabIcon="person"></ion-tab> </ion-tabs>
html頁面中直接寫#myTabs 表明id號,不要寫id="myTabs"this
import {Component} from '@angular/core'; import {HomePage} from '../home/home'; import {AboutPage} from '../about/about'; import {ContactPage} from '../contact/contact'; import {Tabs} from 'ionic-angular'; import {Injectable,ViewChild} from '@angular/core'; @Component({ templateUrl: 'build/pages/tabs/tabs.html' }) export class TabsPage { @ViewChild('myTabs') tabRef:Tabs; private tab1Root: any; private tab2Root: any; private tab3Root: any; constructor() { // this tells the tabs component which Pages // should be each tab's root Page this.tab1Root = HomePage; this.tab2Root = AboutPage; this.tab3Root = ContactPage; } ionViewDidEnter(){ this.tabRef.select(1); } }