Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解


Posted in Javascript onMarch 13, 2018

1.Ionic3.x中页面(组件)之间正向传值方式?

这里所说的正向传值指的是如有两个页面,我们简称 页面A 和 页面B,正向指的是A跳转到B,比如一个商品跳转这个商品的详情页面。

正向传值Ionic3.x主要有2种

  • 标签上直接跳转
  • Js跳转

1) 标签上直接跳转

Ionic3.x对Angular2以上的的路由进一步封装,路由跳转主要是由模块 NavController 来完成的,传递参数主要是由模块 NavParams 来完成的,用法如下

A页面内容:

htmll:代码

<button [navPush]="bPage" [navParams]="{id:'001'}"></button>

ts:代码

import { BPage } from '../BPage';
export class APage {
 public bPage:any;
 constructor(public navCtrl: NavController, public navParams: NavParams){
    this.bPage = BPage;
 }
}

注意:这边 自己经常遇到一个问题就是我们申明,变量bPage的,可以有的教程就直接赋值,如
public bPage = BPage;我的问题是,我写这种写法点击按钮跳转不了,所以我的解决的方法 是在构造函数里面赋值,这样就可以解决啦!

那B页面要怎么获取 呢,看招:

B页面内容:

ts代码

export class APage {
public bPage:any;
constructor(public navCtrl: NavController, public navParams: NavParams){
  // 获取A页面传递过来的id
  let id = this.navParams.get('id');
 }
}

获取相对还是很容易!

2.Js跳转

A页面内容:

htmll:代码

<buttton (click)="goToBpage()"></button>

ts代码

import { BPage } from '../BPage';
export class APage {
 constructor(public navCtrl: NavController, public navParams: NavParams){
 }
 // 跳转方法
 goToBpage(){
   this.navCtrl.push(BPage,{'id':'0001'})
 }
}

B页面获取同上,这边js跳转主要是用NavControlller中的push方法,第一个参数为要跳转的页面,第二个参数的就是参数值,注意这是一个Json格式的对象。

总结

今天主要分享界面的正向传值,其实主要归功了NavController和NavParams这两个强大 的模块,这两个还有很多方法 ,大家要进一步学习,可以到官方文档查看哦。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js中小数转换整数的方法
Jan 26 Javascript
javascript面向对象快速入门实例
Jan 13 Javascript
jquery实现勾选复选框触发事件给input赋值
Feb 01 Javascript
JavaScript的jQuery库插件的简要开发指南
Aug 12 Javascript
js实现统计字符串中特定字符出现个数的方法
Aug 02 Javascript
AngularJS 应用身份认证的技巧总结
Nov 07 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
详解webpack多页面配置记录
Jan 22 Javascript
详解微信小程序的 request 封装示例
Aug 21 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
Nov 23 Javascript
vue实现简单的日历效果
Sep 24 Javascript
Vue实现简易计算器
Feb 25 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 #Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 #Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 #Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 #Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 #Javascript
解决vue多个路由共用一个页面的问题
Mar 12 #Javascript
angular5 httpclient的示例实战
Mar 12 #Javascript
You might like
在php和MySql中计算时间差的方法
2011/04/22 PHP
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
十个PHP高级应用技巧果断收藏
2015/09/25 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
Prototype Template对象 学习
2009/07/19 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
2013/09/25 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
javascript类型转换使用方法
2014/02/08 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
2015/10/15 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
实例解析angularjs的filter过滤器
2016/12/14 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
JS 事件机制完整示例分析
2020/01/15 Javascript
vue实现打地鼠小游戏
2020/08/21 Javascript
微信小程序实现文件预览
2020/10/22 Javascript
[08:42]DOTA2每周TOP10 精彩击杀集锦vol.2
2014/06/25 DOTA
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
python生成并处理uuid的实现方式
2020/03/03 Python
Python解析微信dat文件的方法
2020/11/30 Python
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
jQuery treeview树形结构应用
2021/03/24 jQuery
学习决心书范文
2014/03/11 职场文书
本科生导师推荐信范文
2014/05/18 职场文书
承诺书格式范文
2014/06/03 职场文书
财务整改报告范文
2014/11/05 职场文书
2014年大学生工作总结
2014/11/20 职场文书
工作简历的自我评价
2019/05/16 职场文书
Linux安装apache服务器的配置过程
2021/11/27 Servers
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技