ionic4 路由跳转传值

简介: ionic4 路由跳转传值

路由跳转穿参


一、在.page.ts文件中添加‘

第一步:引入接收路由传值的模块

import { ActivatedRoute } from '@angular/router';

第二步:声明承接数据的数组

 public listorderid: any = {};

第三步:定义

constructor(public activatedRoute: ActivatedRoute){}

第四步:接收路由传值的方法

gOnInit() {   
    
    //接收路由传值
    this.activatedRoute.queryParams.subscribe((result) => {
      console.log(result);
      this.listorderid=result;
       this.requestData(result.orderid)
    })

二、在.page.html文件中添加

第五步:在页面渲染

<h4>订单号:{{listorderid.orderid}} </h4>

示例图:

1.跳转前

2.跳转后

目录
相关文章
|
6月前
ionic 4 点击按钮跳转页面传值并刷新
ionic 4 点击按钮跳转页面传值并刷新
55 2
|
6月前
|
缓存
ionic4 路由跳转刷新实战
ionic4 路由跳转刷新实战
53 0
|
6月前
|
API 数据库
ionic4 接收API数据库传值并显示
ionic4 接收API数据库传值并显示
45 0
|
JavaScript 前端开发 编解码
Ionic 入门与实战之第三章:Ionic 项目结构以及路由配置
原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第三章,主要对 Ionic 的项目结构作了介绍,并讲解了Ionic 中的路由概念以及相关配置。原文发表于我的技术博客 1. Ionic 项目结构 这是初始化创建的 Ionic 项目结构,接下来将一一讲解。
1449 0
|
JavaScript 前端开发 Android开发
Ionic 开发中遇到的常见问题及解决方案
Ionic 常见问题及解决方案
8374 0
|
Web App开发 索引
Ionic 2 开发(一)_安装与目录结构
由于公司开始使用后ionic 进行前段开发,现在需要学习下ionic,虽然是后台开发,但是还是有必要了解下的 安装Node.js 官网:http://nodejs.cn/ 自行下载安装 安装Ionic npm install -g cordova npm install -g ionic 设置淘宝镜像 npm config set registry https://registry.
1095 0
|
Web App开发 移动开发 JavaScript
Win10 UWP开发系列:使用VS2015 Update2+ionic开发第一个Cordova App
原文:Win10 UWP开发系列:使用VS2015 Update2+ionic开发第一个Cordova App 安装VS2015 Update2的过程是非常曲折的。还好经过不懈的努力,终于折腾成功了。 如果开发Cordova项目的话,推荐大家用一下ionic这个框架,效果还不错。
1791 0
|
缓存 JavaScript Android开发
Ionic 1 & 2 开发常见问题 Q&A
原文发表于我的技术博客 本文分享了在 Ionic 1 & 2 版本开发过程中常见问题的一些 Q&A,供慕课网同学或其他朋友参考。原文发表于我的技术博客 1. 版本的问题 Ionic 2 目前属于快速迭代更新的版本,版本的更新会带来如文件结构和少许代码的变更,不过底层还是构建于 Angular 2 ...
1530 0
ionic开发之用户头像修改-图片选择与上传
用户头像修改,图片选择上传,非常常用的功能,本来打算和wap版一样,也用XMLHttpRequest和FormData来处理图片异步上传,结果在手机上测试的时候发现,onload事件没有触发,没找到原因,本来想省点事才不用插件去实现这个功能的,这下看来只能用插件了。
1696 0