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.跳转后

目录
相关文章
|
2月前
ionic 4 点击按钮跳转页面传值并刷新
ionic 4 点击按钮跳转页面传值并刷新
31 2
|
2月前
|
缓存
ionic4 路由跳转刷新实战
ionic4 路由跳转刷新实战
25 0
|
2月前
|
API 数据库
ionic4 接收API数据库传值并显示
ionic4 接收API数据库传值并显示
30 0
|
JavaScript 前端开发 编解码
Ionic 入门与实战之第三章:Ionic 项目结构以及路由配置
原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第三章,主要对 Ionic 的项目结构作了介绍,并讲解了Ionic 中的路由概念以及相关配置。原文发表于我的技术博客 1. Ionic 项目结构 这是初始化创建的 Ionic 项目结构,接下来将一一讲解。
1426 0
|
Android开发
ionic3项目实战教程 - 第13讲 ionic3社交分享(QQ分享和微信分享)
ionic3项目实战教程 - 第13讲 ionic3社交分享(QQ分享和微信分享) 图片发自简书App 这一讲主要包含以下几个部分: 1.在微信开放平台创建应用获得wechatappid; 2.
1417 0
|
Android开发 iOS开发
ionic3项目实战教程 - 第12讲 ionic3制作icon和splash
这一讲主要包含以下几个部分: 1.设计icon; 2.设计splash; 3.生成各个平台各个尺寸的icon和splash; 1.设计icon 来,打开你的PS,新建-文件,像素为1024*1024,背景透明,确定; .
1178 0
|
Web App开发
ionic3项目实战教程 - 第11讲 ionic3个人中心界面设计
ionic3项目实战教程 - 第11讲 ionic3个人中心界面设计 这一讲主要包含一下几个部分: 1.个人中心ts具体代码展示; 2.个人中心html具体代码展示; 3.
1373 0
ionic3项目实战教程 - 第10讲 ionic3分类菜单设计(类似外卖)
注意,干货来了,相比前面几讲这一讲就要难以消化多了,请做好心理准备。 因为在这之前,经常看到有群友在求这种分类菜单的组建,今天我就为大家再造一个轮子 [微笑脸]。
1096 0
|
Web App开发
ionic3项目实战教程 - 第8讲 ionic3商品详情页的实现
这一讲主要包含以下几个部分: 1.创建商品详情页 2.获取商品详情页的数据 3.展示商品详情页的数据 1.创建商品详情页 执行 ionic g page product-details 8-1.
1068 0
|
Web App开发
ionic3项目实战教程 - 第9讲 ionic3应用内主题浏览器ThemeableBrowser的使用
这一讲主要实现商品的"抢购"功能 1.安装ThemeableBrowser插件; 2.使用ThemeableBrowser插件; 1.安装插件 分别执行以下命令: ionic cordova plugin add cordova-plugin-t...
1451 0