ionic,使用push打开子页面，子页面传递数据给父页面！！！！！！

最新推荐文章于 2025-11-13 12:16:46 发布
原创 最新推荐文章于 2025-11-13 12:16:46 发布 · 1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文分享了关于父页面代码片段的优化经验，通过使用Promise结合NavController实现子页面打开个人信息功能，详细介绍了具体实现过程。

找了一天终于搞好了

父页面代码片段，不要怀疑

// 打开个人信息
openCreatPersoninfo() {
new Promise((resolve, reject) => {
this.navCtrl.push('UserInfomation', { resolve: resolve });
}).then(d => {
// console.log(d)
// this.currentUser.headimgUrl = d;
this.headimgUrl = d;
// console.log(this.headimgUrl)
})

}


子页面代码片段


参考链接：https://blog.youkuaiyun.com/zf_hacjox/article/details/64443442

Ionic实战项目-跨平台App开发
含笑
04-28 1万+
功能技术分析 - 读取朋友圈消息状态 - 朋友列表可以列出朋友信息 - 用户中心请求API,实现用户登录。用户信息的读取功能 用户中心模块 - 用户登录状态判断 - 用户登录信息存储 - Ionic App 中处理API请求 APP周边资源 - 启动界面的快速生成技巧 - APP图表 - IOS平台打包发布 - IOS平台打包发布 - 极光推送模块的集
angular+ionic开发的页面，当子页面需要从父组件带参进入又需要可以脱离父组件进入，怎么配置？
涂涂
10-21 1554
这个代码记录源于一个需求，例如：一个问卷页面，需要从H5的问卷列表点击进入，也需要可以单独从Banner点击直接进入问卷页面 在原生安卓和IOS跳H5页面的时候，需要往一个url传递参数跳转页面。 这时H5页面请求接口需要的参数来源于url。在一个APP里面需要一个页面既可以从H5的列表页面进入，又可单独从APP的指定地方配带参数的url进入该页面。 问题点：angular+ionic 开发
子页面与父页面相互调用函数、元素、变量
weixin_30337157的博客
05-15 139
子页面调用父页面 函数： parent.$(window.parent.document).find('#J_remotemodal').modal('hide'); //元素事件 window.parent.dele(id); 元素： parent.document.getElementById('id') 变量： var variable = parent.varia...
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
11-28
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'}"></b
ionic2 返回页面
xin_bao_long的博客
09-20 355
1、返回到当前页面前n个页面 export class FaceCheckResultPage { private callbackFunction: Function; // 操作结束后的回调函数。上一页面传递的回调参数 constructor( public navCtrl: NavController, private navPa...
ionic父子组件的传值
qq_38990521的博客
08-17 2544
目录结构 一、父组件==&gt;子组件传值        父组件 about.ts： public parentVal="我是父组件的值";    父页面 about.html： &lt;child [parentVal]="parentVal"&gt;&lt;/child&gt;    子组件 child.ts:       1、引入input模块 import { ...
11、使用 Angular 和 Ionic 构建审计应用程序
最新发布
jwt8token的博客
11-13 16
本文详细介绍了如何使用 Angular 和 Ionic 构建一个功能丰富的审计应用程序。内容涵盖主题定制、Firebase 实时数据库配置与数据获取、动态表单创建（使用 ngx-formly）、以及通过 Ionic Native 集成原生相机功能。通过完整的流程图和代码示例，帮助开发者掌握跨平台移动应用开发的关键技术，并提供了常见问题解决方案及未来拓展方向。
7、Ionic装饰器和服务详解
dapp9builder的博客
10-16 14
本文详细介绍了Ionic框架中的装饰器和服务，涵盖自定义装饰器的实现、Ionic Module和Component装饰器的使用、页面间导航与数据传递、配置服务、平台服务及存储服务的应用。通过实例演示了如何搭建Ionic应用、管理页面导航、传递参数、根据平台定制UI以及持久化数据。文章还总结了各类服务的特点与最佳实践，并提供了代码优化建议和常见问题解决方案，帮助开发者高效构建跨平台移动应用。
Ionic 5入门教程：构建带列表与表单的CRUD应用
关于“导航”系统，Ionic 使用基于栈的页面导航机制，核心组件为 `<ion-router-outlet>`，它与 Angular Router 深度集成，支持声明式路由配置、懒加载模块、参数传递和守卫机制（如 CanActivate）。通过 `...
Ionic 3集成OneSignal推送通知教程源码
Ionic 3 是一个基于 Angular 框架的开源前端开发平台，广泛用于构建跨平台移动应用程序。它允许开发者使用 Web 技术（如 HTML、CSS 和 JavaScript）来创建原生体验的移动应用，并通过 Cordova 或 Capacitor 插件访问...
ionic 用上懒加载之后的页面push方法（带参数，实用）
chelen_jak的专栏
09-26 538
原文出处：https://blog.youkuaiyun.com/qq_34645412/article/details/78696135 延伸阅读： 1、angular+ionic开发的页面，当子页面需要从父组件带参进入又需要可以脱离父组件进入，怎么配置？ 2、ionic 两种跳转方式 3、管方文档 4、Ionic3项目开发——页面跳转与参数传递 （比较完整例子，实用） 用上懒加载后的页面push不在使p...
ionic3页面间数据传递及Events
qq993284758的博客
08-29 1万+
1.将数据传递到要跳转到的页面（1）push()要将新页面推送到堆栈，可使用push方法。同时也可以通过将数据传递给push方法的第二个参数，来将数据传递给下一个页面。import {LoginPage } from'./login'; ... pushPage(){ this.navCtrl.push(LoginPage, { id: 123, name: "Ca...
layer子页面父页面交互、数据传值
_cheny
08-19 1万+
layer子页面父页面交互、数据传值 //获取layer 的弹框窗口 var iframe = window[layero.find('iframe')[0]['name']]; //通过窗口获取里面的变量或者执行里面的方法 //执行方法并接收返回值 var ids =iframe.getAllIds(); //获取变量 需要在js先定义 var roleId = iframe.rolId;...
ionic下面三个标签,带侧拉Home.html子页面
dongchangqi95的博客
10-22 632
html> html> head lang="en"> meta charset="UTF-8"> meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> link href="ionic-v1.3.3/css/ionic.c
LayUI父子界面传值
热门推荐
T_james的博客
01-13 3万+
1.在项目开发中发现要用到父子界面传值的引用，以及调用相关的短信接口进行验证的操作，所用到的包括遮罩，倒计时的功能。 2.子界面传值，父页面接收。 首先是一个添加界面，然后在当前添加界面弹出又一个选择窗口，最重要的是当前界面选择后将值回显到父添加页面，由于没有发现layui里面有相关控件，所以只能另辟蹊径。在网上找了很多类似的例子，说实话，很多都是对自己当时需求所发的博客来讲述，我可以
ionic3+angular4--页面间数据传递
麦冬的博客
10-17 4460
ionic3+angular4 界面间数据传递 方法一： 通过Push传值 import { NavController,Content  } from 'ionic-angular';   constructor(public navCtrl: NavController) //参数二：要传递到下一个界面的数据，类型有：string，object   this.navCt
ionic项目中跨页面传递参数的几种方式
去年槐花香
08-24 1万+
1、使用angularjs自带的$cacheFactory服务 $cacheFactory 从字面直译即为缓存工厂，可以用它来生成缓存对象，缓存对象以key-value的方式进行数据的存储，在整个应用内是单例的，可以在service或者controller中注入这个服务，然后就可以用它来自由的存取对象以及各种变量，下面是一个简单例子 .controller('AppCtrl', fun
angularjs2--tab页调用父页面的方法
FreeMing-imduingui0
02-23 2480
angularjs2–tab页调用父页面的方法问题情景：页面A中使用window.open()打开新的tab页B，在页面B中想调用A中的方法。比如，在画面B中做了一些改变数据的操作，想在B关闭时候，A画面自动刷新数据（当然ts里有一个刷新的方法等着调用）。代码：A画面：HTML:<div class="getStory" id="getStory" (click)="editerclose()"><
ionic4 接收API数据库传值并显示
阿杰
04-26 1306
接收数据库通过API传的数据并显示 通过如下命令建立公共服务组件 ionic g service service/http 如图 common.service…spec.ts文件的内容 import { TestBed } from '@angular/core/testing'; import { CommonService } from './common.service'; des...
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' } }); } ``` 需要注意的是，这种方法只适用于父子页面之间的值传递，如果需要在非父子关系的页面之间传递值，需要使用其他方法。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值