ionic ：用NavController實現頁面跳轉及使用@IonicPage實現頁面懶加載

NacController 介紹

NavController是導航控制器組件的基類，比如：nav、tab等；你可以使用NacController 導航到應用中的頁面。在基本級別，導航控制器是表示特定歷史（例如Tab）頁面的數組。可以通過按壓和彈出頁面或在歷史記錄中的任意位置插入和刪除這些數組來操縱整個應用程序的頁面。
其基本方法有push（）和pop()兩種；
一般推進頁面用push();回退刪除頁面用pop();

1、使用push()方法推進頁面

step1、創建被推進的頁面（將打開的頁面）

import { Component } from '@angular/core';
import { NavController, IonicPage } from 'ionic-angular';
@IonicPage({name:"mail"})
@Component({
  selector: 'page-mail',
  templateUrl: 'mail.html'
})
export class MailPage {
  constructor(public navCtrl: NavController) {

  }
}

step2、創建當前頁面並不傳遞參數打開step1中的頁面

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { MailPage } from './../mail/mail';
@Component({
   template: `
   <ion-header>
     <ion-navbar>
       <ion-title>Login</ion-title>
     </ion-navbar>
   </ion-header>

   <ion-content>
     <button ion-button (click)="pushPage()">
       Go to OtherPage
     </button>
   </ion-content>
   `
})
export class StartPage {
  constructor(public navCtrl: NavController) {
  }
  pushPage(){
  //不傳遞數據打開頁面，其中MailPage 是被打開頁面的名字
    this.navCtrl.push(MailPage );
  }
}

step3、傳遞參數打開頁面並在新頁面中實現取值

1、傳參打開（推送）頁面的push方法：

 pushPage(){
    this.navCtrl.push(MailPage, {
      id: "123",
      name: "Carl"
    });
  }

2、推送的視圖可以通過NavParams 類訪問數據來接收數據。

export class MailPage {
  constructor(public navCtrl: NavController) {
     let id = navParams.get('id');
     let name = navParams.get('name');
  }
}

2、使用pop()方法從堆棧中刪除視圖，將結束當前頁面返回堆棧中的上一個視圖

使用方式如下：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  template: `
  <ion-header>
    <ion-navbar>
      <ion-title>Other Page</ion-title>
    </ion-navbar>
  </ion-header>
  <ion-content>I'm the other page!</ion-content>`
})
class OtherPage {
   constructor(public navCtrl: NavController ){
   }
   popView(){
     this.navCtrl.pop();
   }
}

使用@IonicPage–頁面懶加載方式打開新頁面

配置@IonicPage懶加載步驟：

step1、給需要懶加載的頁面配置module.ts；然後在IonicPageModule.forChild導入頁面模塊時添加應該是深層鏈接的頁面

比如的例子mail中創建並配置mail.module.ts：

import { MailPage } from './mail';
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';

@NgModule({
  declarations: [
    MailPage
  ],
  imports: [
    IonicPageModule.forChild(MailPage),
  ],
  entryComponents: [
    MailPage
  ],
  providers: [
  ],
  exports: [
    MailPage
  ]
})
export class MailModule {}

step2、 將@IonicPage裝飾器添加到.ts文件裏

比如我的mail.ts如下：

import { Component } from '@angular/core';
import { NavController, IonicPage } from 'ionic-angular';
@IonicPage({name:"mail"})
@Component({
  selector: 'page-mail',
  templateUrl: 'mail.html'
})
export class MailPage {

  constructor(public navCtrl: NavController) {

  }

}

注意：如果使用@IonicPage（），其中name如果未提供屬性，則該屬性將設置爲類名MailPage

step3、 懶加載打開新頁面，不需要在頂部進行import導入，只需要將之前的頁面名字用引號引起來即可：

使用方式如下：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { MailPage } from './../mail/mail';
@Component({
   template: `
   <ion-header>
     <ion-navbar>
       <ion-title>Login</ion-title>
     </ion-navbar>
   </ion-header>

   <ion-content>
     <button ion-button (click)="pushPage()">
       Go to OtherPage
     </button>
   </ion-content>
   `
})
export class StartPage {
  constructor(public navCtrl: NavController) {
  }
  pushPage(){
  //打開頁面
   this.navCtrl.push('mail');
  }
}