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');
  }
}