ionic 跨页面传值的几种方法

2024-06-11 07:08

本文主要是介绍ionic 跨页面传值的几种方法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1、使用AngularJS自带的$cacheFactory服务

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

 

  1. .controller('AppCtrl'function ($scope, $ionicModal, $timeout, $cacheFactory) {  
  2.   
  3.   var user = {name: 'jax', age: 18, sex: '男'};  
  4.   var user_cache = $cacheFactory("user_cache");  //声明一个user_cache缓存对象    
  5.   user_cache.put("lol",user);    //放入缓存对象  

 

 

  1. .controller('PlaylistCtrl'function ($scope, $stateParams, $cacheFactory) {  
  2.     var user_cache = $cacheFactory.get("user_cache");   //取出名为user_cache的缓存对象  
  3.     var user = user_cache.get("lol");   //取出缓存对象中键值为lol的对象  
  4.     // user_cache.remove("lol");  //删除键值为lol对应的值  
  5.     // user_cache.removeAll(); //清除缓存对象中所有的键值对  
  6.     // user_cache.destroy(); //销毁user_cache缓存对象  
  7.     console.log(user);  
  8.   });  

 

当从AppCtrl对应页面切换到PlaylistCtrl对应的页面时,浏览器控制台打印结果:

 

$cacheFactory常用的几个方位api如下:

- {{*}} get({string} key) — 返回与key对应的value值,如果未命中则返回undefined
- {void} remove({string} key) — 从缓存中删除一个键值对
- {void} removeAll() — 删除所有缓存中的数据
- {void} destroy() — 删除从$cacheFactory引用的这个缓存.

2、使用url传参
例:playlists.htm页面将 playlist.id 传递到 playlist页面
  1. <ion-item  href="#/app/playlists/{{playlist.id}}">  //playlists.html页面  
  1. .controller('PlaylistCtrl'function ($scope, $stateParams, $cacheFactory) {  
  2.     var user_cache = $cacheFactory.get("user_cache");   //取出名为user_cache的缓存对象  
  3.     var user = user_cache.get("lol");   //取出缓存对象中键值为lol的对象  
  4.     // user_cache.remove("lol");  //删除键值为lol对应的值  
  5.     // user_cache.removeAll(); //清除缓存对象中所有的键值对  
  6.     // user_cache.destroy(); //销毁user_cache缓存对象  
  7.     console.log(user);  
  8.   
  9.     var playlistId=$stateParams.playlistId;  //用$stateParams 取值  
  10.     console.log("playlistId:"+playlistId);  
  11.   });  

 

 

需要注意的是必须在app.js路由中配置接受这个参数

 

  1. .state('app.single', {  
  2.     url: '/playlists/:playlistId',  //配置多个参数用:a/:b/:c  
  3.     views: {  
  4.       'menuContent': {  
  5.         templateUrl: 'templates/playlist.html',  
  6.         controller: 'PlaylistCtrl'  
  7.       }  
  8.     }  

 

3、service或者factory传值(service跟factory中都是单例模式,定义的变量在整个应用内唯一)

定义变量data

 

  1. angular.module('starter.controllers', [])  
  2.   .service('dataService',function () {  
  3.       var data="I come from service";  //定义变量  
  4.     return{  
  5.       getData:function () {  
  6.         return data;  
  7.       }  
  8.     }  
  9.   })  

 

 

在controller中取出变量

 

  1. .controller('PlaylistCtrl'function ($scope, $stateParams, $cacheFactory,dataService) {  
  2.   console.log("sercice data:"+dataService.getData());  //得到data  
  3. });  

4、使用H5本地存储localStorage或者sessionStorage(还有indexDB,websql在数据量较大情况下使用)

 

getItem //取记录

setItem//设置记录

removeItem//移除记录

key//取key所对应的值

clear//清除记录

键值对存储,用法也是非常简单,上面给出了常用的api,

这篇关于ionic 跨页面传值的几种方法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1050476

相关文章

postgresql使用UUID函数的方法

《postgresql使用UUID函数的方法》本文给大家介绍postgresql使用UUID函数的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录PostgreSQL有两种生成uuid的方法。可以先通过sql查看是否已安装扩展函数,和可以安装的扩展函数

Python实现终端清屏的几种方式详解

《Python实现终端清屏的几种方式详解》在使用Python进行终端交互式编程时,我们经常需要清空当前终端屏幕的内容,本文为大家整理了几种常见的实现方法,有需要的小伙伴可以参考下... 目录方法一:使用 `os` 模块调用系统命令方法二:使用 `subprocess` 模块执行命令方法三:打印多个换行符模拟

Java中Arrays类和Collections类常用方法示例详解

《Java中Arrays类和Collections类常用方法示例详解》本文总结了Java中Arrays和Collections类的常用方法,涵盖数组填充、排序、搜索、复制、列表转换等操作,帮助开发者高... 目录Arrays.fill()相关用法Arrays.toString()Arrays.sort()A

Nginx安全防护的多种方法

《Nginx安全防护的多种方法》在生产环境中,需要隐藏Nginx的版本号,以避免泄漏Nginx的版本,使攻击者不能针对特定版本进行攻击,下面就来介绍一下Nginx安全防护的方法,感兴趣的可以了解一下... 目录核心安全配置1.编译安装 Nginx2.隐藏版本号3.限制危险请求方法4.请求限制(CC攻击防御)

python生成随机唯一id的几种实现方法

《python生成随机唯一id的几种实现方法》在Python中生成随机唯一ID有多种方法,根据不同的需求场景可以选择最适合的方案,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习... 目录方法 1:使用 UUID 模块(推荐)方法 2:使用 Secrets 模块(安全敏感场景)方法

一文详解如何使用Java获取PDF页面信息

《一文详解如何使用Java获取PDF页面信息》了解PDF页面属性是我们在处理文档、内容提取、打印设置或页面重组等任务时不可或缺的一环,下面我们就来看看如何使用Java语言获取这些信息吧... 目录引言一、安装和引入PDF处理库引入依赖二、获取 PDF 页数三、获取页面尺寸(宽高)四、获取页面旋转角度五、判断

MyBatis-Plus通用中等、大量数据分批查询和处理方法

《MyBatis-Plus通用中等、大量数据分批查询和处理方法》文章介绍MyBatis-Plus分页查询处理,通过函数式接口与Lambda表达式实现通用逻辑,方法抽象但功能强大,建议扩展分批处理及流式... 目录函数式接口获取分页数据接口数据处理接口通用逻辑工具类使用方法简单查询自定义查询方法总结函数式接口

MySQL深分页进行性能优化的常见方法

《MySQL深分页进行性能优化的常见方法》在Web应用中,分页查询是数据库操作中的常见需求,然而,在面对大型数据集时,深分页(deeppagination)却成为了性能优化的一个挑战,在本文中,我们将... 目录引言:深分页,真的只是“翻页慢”那么简单吗?一、背景介绍二、深分页的性能问题三、业务场景分析四、

JAVA中安装多个JDK的方法

《JAVA中安装多个JDK的方法》文章介绍了在Windows系统上安装多个JDK版本的方法,包括下载、安装路径修改、环境变量配置(JAVA_HOME和Path),并说明如何通过调整JAVA_HOME在... 首先去oracle官网下载好两个版本不同的jdk(需要登录Oracle账号,没有可以免费注册)下载完

Java中读取YAML文件配置信息常见问题及解决方法

《Java中读取YAML文件配置信息常见问题及解决方法》:本文主要介绍Java中读取YAML文件配置信息常见问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要... 目录1 使用Spring Boot的@ConfigurationProperties2. 使用@Valu