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

本文转自：https://www.jianshu.com/p/de40aeb3d371

往期传送门
来扯点ionic3[0] 吹完牛再入门也不迟
来扯点ionic3[1] 创建一个新页面

 

 

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

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

• 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 是一个内置指令
让按钮在视觉上呈现出与操作系统相符的效果

 

iOS下按钮的效果

 

不加指令的话，额…

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的页面机制

过往我们在网页上进行页面之间的链接，是通过<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中切换时，看到的响应的栈顶页面。

 

 

下一章：来扯点ionic3[3] 页面的生命周期事件，也就是凡间所说的钩子

作者：忠叔
链接：https://www.jianshu.com/p/de40aeb3d371
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。