ionic3-handbook
ionic3-handbook copied to clipboard
JerryMissTom
6、界面跳转
我们的APP肯定不是只有一个界面，这就需要了解ionic的内部导航的用法了。在ionic介绍这一章节提到，ionic实现了适合移动端开发的堆栈式导航系统，通过简单的push和pop实现界面的跳转和传值。ionic中界面分两种，懒加载界面和非懒加载的，所以这篇我们分两个部分来讲解，最后会介绍下懒加载界面和非懒加载界面的区别。
还是使用之前的项目，根目录下通过ionic serve运行我们的项目
懒加载界面
根目录下，通过ionic generate page lazy-load(关于此命令的更多解释见文章最后)创建一个懒加载界面，会在src/pages目录下新建一个文件夹，里面包含四个文件。如下：
── pages
│ ...
│ └── lazy-load
│ ├── lazy-load.html
│ ├── lazy-load.module.ts
│ ├── lazy-load.scss
│ └── lazy-load.ts
下面开始从home页跳转到LazyLoad界面，首先在home页添加button按钮，并绑定点击跳转的事件，代码如下：
home.html
...
<button class="btn-primary" (click)="toLazyLoadPage()">跳转到懒加载界面</button>
home.ts
...
toLazyLoadPage() {
this.navCtrl.push('LazyLoadPage', {
name: 'ionic',
age: 18
});
}
解释一下：NavController是ionic导航的核心，它提供了push()操作可以跳转并传值至其他界面，this.navCtrl.push(page:string,params:object）中第一个参数是懒加载界面的名字，是string类型，第二个是传给下一个界面的参数，是Object类型。懒加载界面的名字是lazy-load.ts中导出的类的名字。
下面我们开始在懒加载界面中接收数据，代码如下（ionic创建界面时自动生成的注释可以删除）：
lazy-load.html
<ion-header>
<ion-navbar>
<ion-title>lazy-load</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<p>name:{{name}}</p>
<p>age:{{age}}</p>
<button (click)="back()">返回上一界面</button>
</ion-content>
lazy-load.ts
...
export class LazyLoadPage {
name:string;
age:number;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.name=this.navParams.get('name');
this.age=this.navParams.get('age');
}
back(){
this.navCtrl.pop();
}
...
}
解释一下：通过NavParams提供的get方法可以从上一界面获取数据，get(param:string)中的param就是上一界面中传过来的Object中的key，这儿要换成string类型。通过 NavControl.pop() 可以返回至上一界面。
保存后，项目自动刷新，在首页点击按钮，会发现跳转失败invalid link LazyLoadPage，通过ctrl+c终止项目，然后运行ionic serve重启即可。
效果如下：
非懒加载界面
根目录下，通过ionic generate page normal-load --no-module（关于此命令行的更多解释见文章最后）创建一个非懒加载界面，此时会在src文件夹下会增加新的文件夹，此时目录如下：
.
├── app
├── components
├ ...
├── pages
│ ├── home
│ │ ├── home.html
│ │ ├── home.scss
│ │ └── home.ts
│ ├── lazy-load
│ │ ├── lazy-load.html
│ │ ├── lazy-load.module.ts
│ │ ├── lazy-load.scss
│ │ └── lazy-load.ts
│ └── normal-load
│ ├── normal-load.html
│ ├── normal-load.scss
│ └── normal-load.ts
...
对比可以发现，非懒加载界面少了一个module.ts文件，除此之外，normal-load.ts的代码中少了@IonicPage()这个装饰器。
然后修改app.module.ts中的内容如下：
...
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { NormalLoadPage } from '../pages/normal-load/normal-load';
@NgModule({
declarations: [
MyApp,
HomePage,
NormalLoadPage
],
...
entryComponents: [
MyApp,
HomePage,
NormalLoadPage
],
...
})
export class AppModule {}
Note：只要是非懒加载的界面，都需要在app.module.ts中这两处添加，除非APP很大后使用子模块，这个是后话了，这里不考虑此情况。
下面处理非懒加载界面的跳转，在home页添加button按钮，并绑定点击跳转的事件，代码如下：
home.html
...
<button class="btn-primary" (click)="toNormalLoadPage()">跳转到非懒加载界面</button>
home.ts
import { NormalLoadPage } from '../normal-load/normal-load';
...
toNormalLoadPage(){
this.navCtrl.push(NormalLoadPage, {
name: 'handbook',
age: 20
});
}
同样需要NavController.push()方法这里需要注意的是NormalLoadComponent是非懒加载界面，并且需要导入，不是string，比较下和跳转到懒加载界面的区别。
接着处理非懒加载界面，代码如下：
normal-load.html
<ion-header>
<ion-navbar>
<ion-title>normal-load</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<p>name:{{name}}</p>
<p>age:{{age}}</p>
</ion-content>
normal-load.ts
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
@Component({
selector: 'normal-load',
templateUrl: 'normal-load.html'
})
export class NormalLoadPage {
name:string;
age:number;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.name=this.navParams.get('name');
this.age=this.navParams.get('age');
}
}
获取从上一界面传过来的值的用法和上部分是一样的，同样，返回上一界面的方法也是一致的，这里就不再赘述了，感兴趣的可以参考上面的用法试一下。
运行一下，效果如下：
解释
generate命令
生成懒加载和非懒加载界面的时候，我们用到了ionic提供的命令ionic generate [<type>] [<name>]，熟悉Angular开发的人会觉得很亲切，其中type类型有component（组件），directive（指令）， pipe（管道），provider（service），tabs（tabs页面），page（界面），前三个和Angular中是一样的概念，provider其实就是service，换了一个叫法而已，后面两个是ionic特有的类型。更多命令行的用法请参见 commands
Note：创建界面的命令只在根目录下才起作用，其他目录下运行会报错。另外 lazy-load如果改变成lazy-load-page会发现生成的文件名称会自动把page去掉，这是ionic默认处理的。
懒加载和非懒加载
App在运行时会首先加载app.module.ts中的内容，假如AppModule需要加载的界面过多，会影响性能，从而影响用户体验。特别是在项目很大，界面很多，某些界面很少被点击进入的情况下，这就造成了浪费。
ionic3 中贴心的提供了界面懒加载的功能，当用户点击跳转的时候，界面才加载进来，节约了App启动所需的加载时间和资源。
当然ionic 3也有预加载，具体参见 ionicPage，需要大家自己去研究了。
