Ionic 2之页面堆栈

原作者链接:http://m.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

使用@Component首先需要使用import导入,并使用templateUrltemplate指定其页面构成。

页面堆栈

堆栈的概念大家都很熟悉,其基本原则是:先入后出。页面堆栈也不例外,可以将页面堆栈视为书箱,具体的页面视为不同的待放入书箱的书籍,每一次水平放入一本书,先放的书必然被后来的书“挡住”从而看不到了,想要重新看到就需要先将上面的书拿开。

其实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

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

NavController最基本的就是“放书”的push操作和“拿书”的pop操作,其具体操作类似于Array:

push操作

push操作将一个页面放到页面堆栈的最顶层,使其对用户可见:

this.navCtrl.push(OtherPage);
  • 1

使用push操作页面,只需要提供其页面组件的引用即可,当然首先要使用import将其导入:

import {OtherPage} from ‘../other-page/other-page‘;
  • 1

页面间传值

大多情况下,页面之间需要通信,即页面之间需要进行数据传递,可以为push操作指定第二个参数作为页面间传递的参数:

// my-page.ts
this.navCtrl.push(OtherPage, {
    key1: value1,
    key2: value2
});
  • 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

pop操作

push对应的是pop操作,其实很多时候并不需要手动执行pop操作,Ionic 2中使用push操作时,导航栏上会加上返回按钮用于回到上一页面,也就是说pop操作会被自动执行。当然手动pop操作也是必要的,如用户注销需要跳转至登录页面等场景均需要手动调用pop操作:

this.navCtrl.pop();
  • 1

总结

NavController的功能很多很强大,这里只介绍了其最基本的功能,请大家移步官方文档

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

时间: 2024-10-14 10:00:33

Ionic 2之页面堆栈的相关文章

Ionic的页面堆栈与Tabs菜单相遇的问题(栈只有一个)

本来的需求: 新建的Ionic项目是Tabs菜单,假设有两个选项卡 A 和 B,对应的两个页面的代码完全一样,使用了echarts 插件,并且使用了一个获取页面元素的方法,给自己的一个变量赋值,然后将echarts图写入到这个元素里面. html中<div id="chartContainer"></div> ts中this.chartContainer = document.getElementById('chartContainer'); 这样导致的效果是:

ionic 监听页面滚动,点击停止滚动

类似今日头条,页面上有很多card,点击每个card跳转该card的详情页面.这里有一个问题,当我滚动页面时,会先后触发touchstart.touchmove.touchend,但是当touchend后,页面仍会因为惯性而继续滚动.这个时候,我想点击页面停止滚动,而不是跳转到某个card的详情页面. 原理很简单:设置一个状态,初始值为true,页面滚动时变为false,页面停止滚动,则恢复为true,只有这个值为true时,才能触发跳转事件,即进入card详情页面. 这里需要用到ionic的一

ionic局部刷新页面与刷新整个页面

1.全局刷新,禁用缓存: 在app.js中设置cach:false,如下: .state('material', { url: '/material', cache:false, templateUrl: 'templates/commonusefunction/material.html', resolve: load([ 'js/controllers/commonusefunction/materialController.js', ]) }) 2.局部刷新页面,加载一部分数据的情况: 在

ionic项目中跨页面传递参数的几种方式

1.使用AngularJS自带的$cacheFactory服务 $cacheFactory 从字面直译即为缓存工厂,可以用它来生成缓存对象,缓存对象以key-value的方式进行数据的存储 在整个应用内是单例的,可以在service或者controller中注入这个服务,然后就可以用它来自由的存取对象以及各种变量,下面是一个简单例子 .controller('AppCtrl', function ($scope, $ionicModal, $timeout, $cacheFactory) { v

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单页面应用中微信分享的问题总结

首先说一下 ionic 是单页面应用,也就是说整个项目就有一个index.html, 那么问题就就来了, 如果我们不同的页面要分享给大家的是不同的链接和图片,应该怎么去做呢? 这就是我们今天要总结的东西. 今天这个问题真是闹得我心烦,有必要总结下来了. 学习重点: 微信分享方法巧妙封装 监听路由事件$rootScope.$on 举一反三 微信分享 关于微信分享,大家都是在熟悉不过了,无非就是调用微信的SDK,授权,给他分享索要的东西的ok.所以对于微信分享似乎没有什么好说的,但是细心的伙伴有木有

ionic-native-transitions调用原生页面切换实现ionic路由切换

废话不多说:ionic-native-transitions调用原生页面切换实现ionic路由切换,从而大大提升ionic应用的性能. ionic-native-transitions是一个ionic的的页面切换插件,主要功能是可以让我们在不改变ionic路由的情况下,实现调用原生的页面切换,从而提升App性能.还可以让原生页面切换和ionic页面切换同时存在. ionic-native-transitions演示图片: ionic-native-transitions  github地址 :

ionic 之 基本布局

目录: 简介 Hybrid vs. Others ionic CSS框架 基本布局 布局模式 定高条块:.bar .bar : 位置 .bar : 嵌入子元素 .bar : 嵌入input 内容:.content和.scroll-content Hybrid vs. Others 要开发手机App,目前有三种方式: 原生/Native:使用原生SDK开发App.优点不用说,当你有足够的资源,这是最理想的方式:缺点是对不同的 平台要分别开发,成本高.周期长. 原生脚本/NativeScript:将

ionic

ionic 中$ionicView.beforeEnter(页面刚加载前)  $ionicView.afterEnter  (页面加载完成) $destroy(页面销毁) 广播事件 //ionic controller刚加载执行的广播通知方法 $scope.$on('$ionicView.beforeEnter', function() { console.log('beforeEnter'); }); 复制代码 //ionic controller全部加载完成 执行的广播通知方法 (数据全部请