上一次我们完成了一个新页面的创建
可能你被乱七八糟的概念搞得心烦意乱
不过你那么聪明又那么好看
我相信你肯定花了点时间就把他们搞懂了
我们先看看手里有几个页面？
- AboutPage
- ContactPage
- HomePage
- TestPage
我们要做什么？
在HomePage上放一个页面，点击之后跳转到TestPage.
怎么做？
可谓非常简单，只需要完成三步。
1.实践：喜欢我就点我啊
1.1 开始前：复原上一节的初始状态
- 文件：pages/tabs/tabs.ts
上一次我们为了观察新创建的TestPage，直愣愣把首屏的HomePage给替换掉了，我们先把他恢复原状：
- 将 tab1Root 重新指向 HomePage
- 删除 TestPage 的 import 语句
import { Component } from '@angular/core';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
tab1Root = HomePage;
tab2Root = AboutPage;
tab3Root = ContactPage;
constructor() {
}
}
直接serve运行本地服务器，一切又完好如初，画面太美不敢看。
1.2 在HomePage搞一个按钮
- 文件: pages/home/home.html
把原来 ion-content 里的内容删除，加入这一个这样的按钮
<button ion-button>喜欢我就点我呀</button>
没错是你熟悉的那个button标签
ion-button 是一个内置指令
让按钮在视觉上呈现出与操作系统相符的效果
iOS下按钮的效果
不加指令的话，额…
1.3 在HomePage组件中引入TestPage
- 文件: pages/home/home.ts
- 引入 TestPage
- 在 HomePage 类中定义 testPage 属性;
- 在构造函数中农将 testPage 指向 TestPage，以便模板可以使用。
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { TestPage } from '../test/test';
@Component({
selector: 'page-home',
templateUrl: './home.html'
})
export class HomePage {
testPage;
constructor(public navCtrl: NavController) {
this.testPage=TestPage;
}
}
1.4 页面一线牵
- 文件：pages/home/home.html
- 为button加上 [navPush] 指令
<button ion-button [navPush]="testPage">喜欢我就点我呀</button>
这时我们切换到浏览器，点击Home页面上的按钮，发现页面流畅地切换到了Test上去了。
2.在业务逻辑中实现跳转
刚才，我们通过了 [navPush] 指令，让模板中的按钮“超链接”到了一个新页面。但是在更复杂的场景中，这样简单的链接可能不能符合我们的需求。比如我们需要在用户点击按钮时，进行一些业务处理，再跳转到下一个页面，这时候就可以利用NavController中的push方法来实现，同样也只有三步：
2.1 引入 NavController
ionic把app的众多交互封装成了若干个controller，其中NavController就是用来管理和导航页面的一个controller。由于几乎每一个页面都会用到NavController，我们发现在HomePage中已经有了引入语句了。
import { NavController } from 'ionic-angular';
此外，类的构造函数定义了一个NavController类型的参数，以告诉angular在创建页面时，需要传入（注入）一个NavController的实例.
constructor(public navCtrl: NavController){
}
2.2 使用push方法来进行跳转
在类中编写一个方法，我们就叫它pushTestPage吧，调用navCtrl对象的push方法，将页面导航到TestPage上
pushTestPage(){
this.navCtrl.push(TestPage);
}
此时文件 home.ts 的完整代码
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { TestPage } from '../test/test';
@Component({
selector: 'page-home',
templateUrl: './home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {
}
pushTestPage(){
this.navCtrl.push(TestPage);
}
}
2.3 将方法绑定到按钮点击事件
在home.html中，为button元素绑定click事件
<button ion-button (click)="pushTestPage()">喜欢我就点我呀</button>
为什么不是 onclick="pushTestPage()" 因为 pushTestPage 不是一个全局函数，它是 TestPage 组件中的一个方法，经过封装之后早已对外不可见，不过可以通过使用(click) 指令来直接调用组件内的方法。
这样我们就可以在pushTestPage里添加更加复杂的业务逻辑，以满足我们的需求。
3.将参数传递给下一个页面
有时我们完成了一个页面上的业务之后，要把相关的数据传给下一个页面处理，这时候就需要向被push的页面传入相关的参数。NavController的push方法的第二个参数接收一个对象。
3.1 为push函数添加第二个参数
假设我们要为TestPage传入一个标题，用来显示到页面上，我们为push方法传入一个对象。
pushTestPage(){
this.navCtrl.push(TestPage,{
title:'没有人可以比我帅'
});
}
3.2 引入NavParam并使用
利用NavParams的get方法，可以将传进来的页面参数读取出来。
切换到 test.ts，完成三个步骤
1.引入NavParams并，并在构造函数添加注入语句
2.为TestPage类添加title属性，读取参数并赋给title
3.将title输出到模板中
- 文件 test.ts
import { Component } from '@angular/core'
import { NavParams } from 'ionic-angular' //step1
@Component({
selector: 'page-test',
templateUrl:'./test.html'
})
export class TestPage {
title:string; //step2
constructor(public params:NavParams){ //step1
this.title=this.params.get('title'); //step2
}
}
- 文件 test.html
如果很多场景的模板引擎，在模板中利用双花括号 {{ }} 将组件的属性输出到界面上。
<ion-header>
<ion-navbar>
<ion-title>
Test
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<!--[step3]-->
<h1>{{title}}</h1>
</ion-content>
4. 老司机必会：手动返回
如同进入页面，我们在退出页面的时候，除了用户点击返回按钮外，也有可能在完成了业务之后，自动返回上一个页面，这时候可以使用NavController的pop方法来实现。
- 文件 test.ts
import { Component } from '@angular/core'
//注意这里
import { NavController, NavParams } from 'ionic-angular'
@Component({
selector: 'page-test',
templateUrl:'./test.html'
})
export class TestPage {
title:string;
//注意这里
constructor(public navCtrl:NavController,public params:NavParams){
this.title=this.params.get('title');
}
//新方法
popPage(){
this.navCtrl.pop();
}
}
- 文件 test.html
在模板中添加返回按钮
<ion-header>
<ion-navbar>
<ion-title>
Test
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<h1>{{title}}</h1>
<button ion-button (click)="popPage()">返回</button>
</ion-content>
5. 扩展内容：ionic的页面机制
过往我们在网页上进行页面之间的链接，是通过<a>标签来实现的。而我们现在制作的 web APP，虽然使用了前端技术，但页面的概念跟之前却所有不同。
ionic APP在编译过后，实际上只有一个index.html网页，它是一个单页面应用。你所看到的页面之间的切换，实际上都是利用 js 来替换界面上的元素，并不是传统意义上的网页之间的跳转。因为传统的网页跳转，是需要向服务器发送请求并下载资源的，即便再快的网速都会有一定的响应时间。这在浏览器上非常正常，但如果是在手机APP上，这样的响应时间会严重影响操作的流畅性。而单页面已经加载了基础的资源，在操作过程中，只需要替换部分的内容，请求部分的资源，配合一些交互设计，让操作没有卡顿感。所以在移动web盛行的今天，单页面应用也是一种大势所趋。
ionic APP中的页面实质上是一个栈的结构（实际上多数原生应用也是这样的），但从当前页面上引入一个新页面时，浏览器（或操作系统）会加载新页面的资源，然后把它添加到栈顶。在界面上的表现就是，新页面“遮住了”原有的页面，下层页面的内容和资源依旧在内存中。
而上层页面被pop掉的时候，上层页面弹出栈，相应的内存被释放（在图中栈顶由C变成了B），在视觉表现上就是上面的页面被“移开”了，下层的页面“暴露了出来”。
所以APP中的页面是有层级关系的，用户在首页一层一层地进入了新页面（A->B->C），回到首页时就得一层一层退出来（C->B->A），所以我们在设计页面的时候，脑海中有明确这样的层级关系，如果栈的层次过多了（超过了5层），就会给用户体验带来困扰。
最后提一下TabsPage，TabsPage可以被理解层一个特殊的页面，这个页面中又包含了若干个页面栈（Tab），每个页面栈相互独立，通过Tab按钮来相互切换。一个页面栈中的push和pop不会影响到其它栈的表现，也就是当你在不同的tab中切换时，看到的响应的栈顶页面。
网友评论