ionic2-頁面的生命週期

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);
  }
}
相關文章
相關標籤/搜索