来扯点ionic3[2] 页面一线牵 珍惜这段缘

上一次咱们完成了一个新页面的建立
可能你被乱七八糟的概念搞得心烦意乱
不过你那么聪明又那么好看
我相信你确定花了点时间就把他们搞懂了

咱们先看看手里有几个页面？

• AboutPage
• ContactPage
• HomePage
• TestPage

咱们要作什么？
在HomePage上放一个页面，点击以后跳转到TestPage.

怎么作？
可谓很是简单，只须要完成三步。

1.实践：喜欢我就点我啊

1.1 开始前：复原上一节的初始状态

• 文件：pages/tabs/tabs.ts

上一次咱们为了观察新建立的TestPage，直愣愣把首屏的HomePage给替换掉了，咱们先把他恢复原状：

1. 将 tab1Root 从新指向 HomePage
2. 删除 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 是一个内置指令
让按钮在视觉上呈现出与操做系统相符的效果

1.3 在HomePage组件中引入TestPage

• 文件: pages/home/home.ts

1. 引入 TestPage
2. 在 HomePage 类中定义 testPage 属性;
3. 在构造函数中农将 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的页面机制

过往咱们在网页上进行页面之间的连接，是经过标签来实现的。而咱们如今制做的 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中切换时，看到的响应的栈顶页面。