ionic2 页面跳转 push() pop() NavController,navParams

 

新建页面http://zyyapp.com/post/185.html

Ionic 2之页面堆栈 :http://blog.csdn.net/u010730126/article/details/63254988

 

 

 

 

还记得Ionic 1中的state和router吗？他们两兄弟配合起来完成页面导航的功能，虽然它们使用起来并不算复杂## 标题 ##，概念也很清晰，不过当页面增多、state嵌套等问题出现后复杂度也会增长，当复杂程度到达必定程度时工程必然难以维护和理解。而Ionic 2效仿原生页面堆栈的概念解决了上述问题。

页面与组件

页面是应用的基石，是交互的基本单位，Ionic 2中页面是经过组件构成的，Ionic 2中实现了不少经常使用组件用于更快地构建应用，如Modal、Popup等。在理解Ionic 2之class及其修饰器@App、@Pipe中咱们接触到了修饰器的概念，而且简单介绍了@App和@Pipe的相关使用方式，使用组件也须要先使用修饰器@Component定义，下面是其基本使用方式：

import {Component} from '@angular/core'; @Component({ templateUrl: "template.html" }) export class PageName(){ constructor(){ } }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

使用@Component首先须要使用import导入，并使用templateUrl或template指定其页面构成。

页面堆栈

堆栈的概念你们都很熟悉，其基本原则是：先入后出。页面堆栈也不例外，能够将页面堆栈视为书箱，具体的页面视为不一样的待放入书箱的书籍，每一次水平放入一本书，先放的书必然被后来的书“挡住”从而看不到了，想要从新看到就须要先将上面的书拿开。

其实Ionic 2中与其说是页面堆栈，不如说是组件堆栈，组件包括但不限于页面，而相似于Modal、Popup、Alert等相关的组件也是由堆栈维护的，下面说起的页面实际上是组件的意思。

Ionic 2中使用NavController操做页面堆栈。

// my-page.ts import {Component} from '@angular/core'; @Component({ templateUrl: "my-page.html" }) export class MyPage(){ constructor(public navCtrl: NavController) { // 使用this.navCtrl操做页面堆栈 } }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

这里创造NavController的实例是为了在类中任意地方都可以使用。

NavController最基本的就是“放书”的push操做和“拿书”的pop操做，其具体操做相似于Array：

push操做

push操做将一个页面放到页面堆栈的最顶层，使其对用户可见：

this.navCtrl.push(OtherPage);

• 1

• 1

使用push操做页面，只须要提供其页面组件的引用便可，固然首先要使用import将其导入：

import {OtherPage} from '../other-page/other-page';

• 1

• 1

页面间传值

大多状况下，页面之间须要通讯，即页面之间须要进行数据传递，能够为push操做指定第二个参数做为页面间传递的参数：

// my-page.ts this.navCtrl.push(OtherPage, { key1: value1, key2: value2 });

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

在OtherPage中可使用NavParams获取到其余页面传至本页面的值：

// other-page.ts import {Component} from '@angular/core'; @Component({ templateUrl: "other-page.html" }) export class OtherPage(){ constructor(public navCtrl: NavController, public navParams: NavParams) { const data = this.navParams.data; const value1 = this.navParams.get('key1'); const value2 = this.navParams.get('key2'); } }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

pop操做

和push对应的是pop操做，其实不少时候并不须要手动执行pop操做，Ionic 2中使用push操做时，导航栏上会加上返回按钮用于回到上一页面，也就是说pop操做会被自动执行。固然手动pop操做也是必要的，如用户注销须要跳转至登陆页面等场景均须要手动调用pop操做：

this.navCtrl.pop();

• 1

• 1

总结

NavController的功能不少很强大，这里只介绍了其最基本的功能，请你们移步官方文档。

参考文档：
理解Ionic 2之class及其修饰器@App、@Pipe
Ionic 2 NavController官方文档
Ionic 2 Component官方文档