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 相关文章推荐
用JavaScript实现UrlEncode和UrlDecode的脚本代码
Jul 23 Javascript
jquery 图片预加载 自动等比例缩放插件
Dec 25 Javascript
前台js改变Session的值(用ajax实现)
Dec 28 Javascript
javascript 利用arguments实现可变长参数
Nov 21 Javascript
node.js基于mongodb的搜索分页示例
Jan 22 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
Bootstrap Multiselect 常用组件实现代码
Jul 09 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
Dec 29 Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
简单使用webpack打包文件的实现
Oct 29 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 09 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
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
PHP字符串的编码问题的详细介绍
2013/04/27 PHP
php+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
php中filter函数验证、过滤用户输入的数据
2014/01/13 PHP
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
使用php转义输出HTML到JavaScript
2015/03/27 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
JS 分号引起的一段调试问题
2009/06/18 Javascript
jQuery 开天辟地入门篇一
2009/12/09 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
2017/01/19 Javascript
浅谈javascript的闭包
2017/01/23 Javascript
node.js-v6新版安装具体步骤(分享)
2017/09/06 Javascript
五步轻松实现zTree的使用
2017/11/01 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
javascript中如何判断类型汇总
2019/05/14 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
Python打包文件夹的方法小结(zip,tar,tar.gz等)
2016/09/18 Python
python实现斐波那契数列的方法示例
2017/01/12 Python
python决策树之C4.5算法详解
2017/12/20 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
Django组件cookie与session的具体使用
2019/06/05 Python
html5 touch事件实现触屏页面上下滑动(二)
2016/03/10 HTML / CSS
美国眼镜网站:EyeBuyDirect
2017/04/13 全球购物
给妈妈洗脚活动方案
2014/08/16 职场文书
工作批评与自我批评范文
2014/10/16 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
家庭暴力离婚起诉书
2015/05/18 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书
超外差式晶体管收音机的组装与统调
2021/04/22 无线电