上次我们完成了新页面的创建也许你被概念乱七八糟分了心但你又聪明又好看我相信你一定会花一段时间后，我们就会理解它们。让我们看看我们手头有多少页？AboutPageContactPageHomePageTestPage我们要做什么？在HomePage放一个页面，点击后跳转到TestPage。怎么做？非常简单，只需要完成三个步骤。1.实践：喜欢就点我1.1开始前：恢复上一节的初始状态文件：pages/tabs/tabs.ts上次我们只是更换了第一屏的HomePage，为了观察新创建的TestPage如果丢失了，我们恢复原状：将tab1Root重新指向HomePage，删除TestPage的import语句import{Component}from'@angular/core';import{AboutPage}from'../about/关于';从'../contact/contact'导入{ContactPage};从'../home/home'导入{HomePage};@Component({templateUrl:'tabs.html'})exportclassTabsPage{tab1Root=主页;tab2Root=关于页面；tab3Root=联系页面；constructor(){}}直接服务运行本地服务器，一切又完好无损，画面美不胜收。1.2在HomePage上创建一个按钮文件：pages/home/home.html把原来ion-content里的内容删掉，加上这个按钮喜欢我就点我就对了button标签大家熟悉的ion-button是内置指令，让按钮在视觉上与操作系统相匹配1.3在HomePage组件中引入TestPage文件：pages/home/home.tsimportTestPage在HomePage类中定义testPage属性；在构造函数中，将testPage指向TestPage，这样就可以使用模板了。从'@angular/core'导入{Component}；从'ionic-angular'导入{NavController}；从'../test/test'导入{TestPage}；@Component（{选择器：'page-home'，templateUrl:'./home.html'})exportclassHomePage{testPage;构造函数（公共navCtrl：NavController）{this.testPage=TestPage;}}1.4页面第一行引出文件：pages/home/home.html添加[按钮navPush]命令喜欢就点我这个时候，我们切换到浏览器，点击首页的按钮，发现页面已经顺利切换到Test了。2.实现业务逻辑中的跳转刚才我们通过[navPush]指令，让模板中的按钮“超链接”到一个新的页面。但是在更复杂的场景下，这样简单的链接可能无法满足我们的需求。比如我们需要在用户点击按钮的时候进行一些业务处理，然后跳转到下一页。这时候我们可以使用NavController中的push方法来实现。也只有三步：2.1引入NavControllerionic，把app的很多交互封装起来，变成了几个controller，其中NavController是用来管理和导航页面的controller。由于几乎每个页面都会用到NavController，所以我们发现在HomePage中已经有了import语句。从'ionic-angular'导入{NavController}；另外，该类的构造函数定义了一个NavController类型的参数，告诉angular在创建页面时传入（注入）一个NavController的实例。constructor(publicnavCtrl:NavController){}2.2使用push方法跳转在类中写一个方法，我们姑且称之为pushTestPage，调用navCtrl对象的push方法，将页面导航到TestPagepushTestPage(){this.navCtrl.push(测试页面);}此时home.ts文件的完整代码import{Component}from'@angular/core';import{NavController}from'ionic-angular';import{TestPage}from'../test/test';@Component({selector:'page-home',templateUrl:'./home.html'})exportclassHomePage{constructor(publicnavCtrl:NavController){}pushTestPage(){this.navCtrl.push(TestPage);}}2.3给按钮点击事件绑定方法在home.html中，给按钮元素绑定点击事件喜欢我就点我为什么不用onclick="pushTestPage()"因为pushTestPage不是一个全局函数，它是TestPage组件中的一个方法，封装后对外已经不可见了，但是可以使用(click)命令直接调用组件中的方法。这样我们就可以在pushTestPage中加入更复杂的业务逻辑来满足我们的需求。3、传递参数给下一页有时候我们完成一个页面的业务后，需要把相关数据传递给下一页处理。这时候我们需要给推送的页面传递相关参数。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属性，读取参数赋值给title3.将title输出到模板文件test.tsimport{Component}from'@angular/core'import{NavParams}from'ionic-angular'//step1@Component({selector:'page-test',templateUrl:'./test.html'})exportclassTestPage{标题：字符串；//step2constructor(publicparams:NavParams){//step1this.title=this.params.get('title');//step2}}文件test.html如果场景模板引擎很多，在模板中使用双花括号{{}}将组件的属性输出到界面。测试

{{title}}

4.老司机们一定知道：手动返回就像进入页面一样。当我们退出页面时，除了用户点击返回按钮外，还可以在业务完成后，自动返回到之前的页面。这时候可以使用NavController的pop方法来实现。filetest.tsimport{Component}from'@angular/core'//这里注意import{NavController,NavParams}from'ionic-angular'@Component({selector:'page-test',templateUrl:'./test.html'})导出类TestPage{title:string;//这里注意constructor(publicnavCtrl:NavController,publicparams:NavParams){this.title=this.params.get('title');}//新方法popPage(){this.navCtrl.pop();}}文件test.html在模板中添加返回按钮测试

{{title}}

Back5.扩展内容：ionic的页面机制，用于通过标签在网页上的页面之间进行链接。我们现在做的webAPP用的是前端技术，但是页面的概念和以前完全不一样。ionicAPP编译后，实际上只有一个index.html网页，是一个单页应用。你看到的页面之间的切换，其实就是用js替换界面上的元素，而不是传统意义上的网页之间的跳转。因为传统的网页跳转需要向服务器发送请求，下载资源，即使网速再快，也会有一定的响应时间。这在浏览器上是很正常的，但是如果是在手机APP上，这样的响应时间会严重影响操作的流畅度。但是，单个页面已经加载了基础资源。在运行过程中，只需要更换部分内容，请求一些资源，使用一些交互设计，让运行没有卡顿感。因此，在移动web盛行的今天，单页应用也是大势所趋。ionicAPP中的页面本质上是一个栈结构（其实大部分原生应用也是如此），但是当从当前页面引入新页面时，浏览器（或操作系统）会加载新页面的资源，然后把它加到栈顶。界面上的表现是新页面“覆盖”了原来的页面，下层页面的内容和资源还在内存中。当上层页面出栈时，上层页面出栈，对应的内存被释放（栈顶由图中的C变为B）。在视觉表现上，上层页面被“移除”，下层页面被“暴露”。因此，APP中的页面是有层次关系的。用户在首页逐层进入一个新页面（A->B->C），返回首页时又要逐层退出（C->B->A），所以当我们在设计页面的时候，心里就有这样一个清晰的层级关系。如果堆栈层数过多（超过5层），会给用户体验带来困扰。最后，让我们提一下TabsPage。TabsPage可以理解为一个特殊的页面。此页面包含多个页面堆栈（选项卡）。每个页面栈相互独立，可以通过Tab键相互切换。在一个页面栈中push和pop不会影响其他栈的性能，即切换不同的tab时，会看到对应栈的首页。