ionic入门教程第七课-简要说明几种界面之间的参数传递及优缺点

最新推荐文章于 2023-01-17 14:04:02 发布
最新推荐文章于 2023-01-17 14:04:02 发布
阅读量7k 收藏 6
点赞数 1
分类专栏： Ionic1入门教程 文章标签： angularjs 参数传递 ionic rootScope
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/onil_chen/article/details/51146058
版权
Ionic1入门教程 同时被 3 个专栏收录
20 篇文章 0 订阅 ¥59.90 ¥99.00
订阅专栏
原创
72 篇文章 0 订阅
订阅专栏
ionic
20 篇文章 0 订阅
订阅专栏

截至2016年4月13日19点32分，我发布的ionic入门教程，已经发布6课了，

总访问量将近6000，平均每节课能有1000的访问量。其中访客最多的是第三课有2700的访客。


其实我开始的时候计划的挺好的，就按照我这阶段的安排，慢慢的带大家做一个比较完整的项目。

但这几天发生了一些事情，让我不得不重新思考该跟大家说什么呢？

从访客数据来看，大家对于整体架构的布置和代码逻辑的规范相对比较感兴趣，也说明大家对基础入门的新建和普通的指令比较了解。

我本来是不打算讲过于基础的东西的，可是今天在技术群里，有个朋友问说ng-repeat怎么用？有人回答他连这个都问，那还怎么做项目。

其实我知道有些朋友基础比较差，看不懂API文档，或者对文档理解不是很清晰，但是人家想学啊。

我知道教这样的朋友并不需要什么技术，却需要足够的耐心。

而且今天我公司让我带一个零基础的同事学ionic，我打算在6-10天左右，让他上手做项目。

所以从下节课开始，我可能会更新比较基础简单的指令。

言归正传。

当项目慢慢做大，内容和业务越来越多的时候，我们都会涉及到多界面之间的参数传递。

再此我简要的说明一下几种比较常用的参数传递方式。

1、通过route传递

了解本专栏 订阅专栏 解锁全文
陈小聪-小虎Oni
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
订阅专栏
Ionic、React Native、Native优劣势对比
weixin_33716557的博客
12-22 452
一、基础知识 IONIC 目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定，使用它成为 Web 和移动开发者的共同选择。Ionic是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发...
ionic html页面跳转传值,ionic 路由使用$state.go父页面向子页面传递参数
weixin_34731836的博客
06-03 158
1.父页面的路由配置.state('tab.article', {url: '/article',nativeTransitions: {type: "fade"},views: {'tab-article': {templateUrl: 'templates/article/article.html',controller: 'ArticleController'}}})2.子页面的路由配置.s...
c语言参数传递机制优缺点,C语言中的参数传递机制详解
weixin_36204626的博客
05-21 375
本文尝试讨论下C中实参与形参的关系，即参数传递的问题。C语言的参数传递值传递首先看下列代码：编译后执行结果如下：可以看到，在调用函数 change 时，会在内存中单独开辟一个空间用于存放形式参数 i ，实参 n 的值会复制给形参 i 。对于形参的任何操作都不会影响到主调函数中的实参 n 。这种参数传递方式是便是典型的值传递。上例中的参数类型是int型，实际上，对于整形(int、short、long...
探索Ionic过程中的一些亮点与各种坑整理
棌棌棌棌棌厷
09-23 2445
说在前面：个人接触ionic不到半个月的时间，完全改变了对H5的看法，在这里mark一下。 Ionic与AngularJs框架绑的很紧，既是优点也是缺点。 实际上Ionic可以分成三大块： 第一块：样式层。ionic通过CSS3强大的样式，模拟了N个平台特有的特征，其中包括操作特征和视图特征。 第二块：逻辑层。直接利用AngularJs的框架概念(MVVM)，双向绑定等等...巴拉巴拉一堆
使用ionic中的侧边栏以及angularjs中广播的使用
diejiankuai3444的博客
09-21 83
接着之前的ionic的例子 查看例子：我的第一段ionic代码 demo3.html（黄底内容为增加或修改的内容） <!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8"> <title>ionic-demo3<...
ionic入门教程第十一课-简要说明ion-list、ion-item完成列表页ion-infinite-scroll上拉加载ion-refresher下拉刷新-附件资源
03-05
ionic入门教程第十一课-简要说明ion-list、ion-item完成列表页ion-infinite-scroll上拉加载ion-refresher下拉刷新-附件资源
ionic入门教程第十三课-多级分类列表的简单实现-附件资源
03-05
ionic入门教程第十三课-多级分类列表的简单实现-附件资源
ionic-ui-modal-service:将参数传递给离子模态。 灵感来自@julianpaulozzi on stackoverflow
05-16
ionic-ui-modal-service 将参数传递给离子模态。 受到启发，恭敬 这是什么？ 这是模态模块，您可以传递任何参数。 演示？ 您可以在上访问CodePen 用法 将js文件加载到index.html < script src =" js/ionic....
read和write以及ioctrl的在驱动中传递数据的区别、特点
xaioqinjie的博客
01-17 875
read和write以及ioctrl的在驱动中传递数据的区别、特点
python参数的位置传递优点_python中参数传递之位置传递、关键字传递、包裹传递与解包裹...
weixin_39667041的博客
11-29 728
原文地址https://blog.csdn.net/love666666shen/article/details/771314871.位置与关键字传递（1）位置传递：先用形式参数定义，然后在调用时对应位置使用实参（具体的数值）调用def sum(a, b):return a + bsum(5, 6)（2）关键字传递：先使用形式参数定义，然后调用时使用定义时的关键词并赋予其相应的值def sub(a...
Angular中$broadcast和$emit的使用方法
热门推荐
justforuse的博客
08-21 3万+
要在控制器之间传递变量变化需要使用angular中的$broadcast和$emit方法来传递，同时使用$on来接收事件并作出响应。broadcast译为广播，即上级传递下级。 示例代码： <script src="../angular.js"></script> <script> angular.module("app", []) .controller("child", functio
（混合移动开发）使用cordova-broadcaster插件监听手机屏幕开关广播
日暮溪亭dj 的博客
12-20 4092
最近在开发部门的一个APP，需要有消息推送功能，前端用轮询，一开始用了cordova-plugin-background-mode插件使其可以后台运行，但是用这个插件太耗电了，也没找到解决方法。后来想到可以在手机屏幕解锁时进行查询，又了解到这种监听属于广播，于是就用到了今天要讲的cordova-broadcaster广播插件。 cordova-broadcaster插件官网 怎么添加cordova...
ionic实现开机app自启动功能
南同学
01-07 378
ionic打包的app实现开机自启动功能（该功能在android系统有效） 1、新建一个StartBootReceiver类继承BroadcastReceiver，接受开机广播，具体代码如下 package com.sznari.survey; // 指StartBootReceiver类所在的路径 // 引入包 import android.content.BroadcastReceiver; import android.content.Context; import android.content.
python中参数的位置传递和名称传递各有什么优缺点_跟老齐学Python之总结参数的传递...
weixin_39824020的博客
12-09 3014
就前面所讲，函数的基本内容已经完毕。但是，函数还有很多值得不断玩味的细节。这里进行阐述。参数的传递python中函数的参数通过赋值的方式来传递引用对象。下面总结通过总结常见的函数参数定义方式，来理解参数传递的流程。def foo(p1,p2,p3,...)这种方式最常见了，列出有限个数的参数，并且彼此之间用逗号隔开。在调用函数的时候，按照顺序以此对参数进行赋值，特备注意的是，参数的名字不重要，重要...
c语言参数传递机制优缺点,（转）关于C语言中函数调用和参数传递机制的探讨...
weixin_36331336的博客
05-21 444
函数，相信许多人也知道其重要性；一个文件往往由一个或者多个函数构成的。然而可能许多人还不知道函数调用的一些深层问题，所以我写的这篇文章一来是应了一个好朋友的要求而写，二来希望一些朋友能够从我这篇文章了解函数调用的机制。但是并不是每个人都可以完全读懂这文章，想完全读懂此文，我想必须具备三个条件：一、对于C语言有一定的了解，最起码有一个整体的初步了解；二、能够读懂UNIX/LINUX下的AT＆T语法的...
Ionic - 笔记 之 Tab
LucioCN
06-19 1334
Ionic2 组件之Tab 学了Tabs更少不了Tab组件，Tab组件写作&lt;ion-tab&gt;,必须要放置在Tabs组件内，是NavController的一种。 基本用法 Tab有以下几个基本属性和事件: Attr Type Desc [root] Page 指定tab希望加载的页面 tabTitle string tab上显示的标题 ...
ionic使用angluar页面之间的值传递
最新发布
04-04
在Ionic中，可以通过以下几种方法实现页面之间的值传递： 1. 通过路由传参 在路由跳转时，可以通过queryParams或者state来传递参数，例如： 在源页面： ```typescript import { Router } from '@angular/router'; constructor(private router: Router) {} goToDestinationPage() { const params = { id: 123, name: 'John' }; this.router.navigate(['/destination'], { queryParams: params }); } ``` 在目标页面： ```typescript import { ActivatedRoute } from '@angular/router'; constructor(private route: ActivatedRoute) {} ngOnInit() { this.route.queryParams.subscribe(params => { console.log(params); // { id: '123', name: 'John' } }); } ``` 2. 通过Ionic的NavController传参 在跳转页面时，可以通过NavController的navigateForward和navigateRoot方法传递参数，例如： 在源页面： ```typescript import { NavController } from '@ionic/angular'; constructor(private navCtrl: NavController) {} goToDestinationPage() { const params = { id: 123, name: 'John' }; this.navCtrl.navigateForward('/destination', { queryParams: params }); } ``` 在目标页面： ```typescript import { NavController, NavParams } from '@ionic/angular'; constructor(private navCtrl: NavController, private navParams: NavParams) {} ngOnInit() { const params = this.navParams.get('queryParams'); console.log(params); // { id: 123, name: 'John' } } ``` 3. 通过localStorage或者sessionStorage存储值 在源页面： ```typescript localStorage.setItem('userId', '123'); ``` 在目标页面： ```typescript const userId = localStorage.getItem('userId'); console.log(userId); // '123' ``` 需要注意的是，这种方法可能会存在安全问题，因为存储在本地的数据可以被其他恶意网站或者插件访问和修改。 4. 通过Ionic的Events事件传递参数 在源页面： ```typescript import { Events } from '@ionic/angular'; constructor(private events: Events) {} goToDestinationPage() { const params = { id: 123, name: 'John' }; this.events.publish('destination:receivedParams', params); } ``` 在目标页面： ```typescript import { Events } from '@ionic/angular'; constructor(private events: Events) { events.subscribe('destination:receivedParams', (params) => { console.log(params); // { id: 123, name: 'John' } }); } ``` 需要注意的是，这种方法只适用于父子页面之间的值传递，如果需要在非父子关系的页面之间传递值，需要使用其他方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值