ionic 4 点击按钮跳转页面传值并刷新

简介: ionic 4 点击按钮跳转页面传值并刷新

点button就可以跳转到另外的页面


1.跳转刷新

在跳转页的ts文件中

import { NavController } from '@ionic/angular';

构造函数

constructor(
    public nav: NavController,
  ) 

具体方法

back(){
    this.nav.navigateRoot(['/tabs/order']);
    location.reload();
   
  }

把上述方法放到你点击按钮的确定事件中,其中发现一个奇怪的事情,如果你直接把 location.reload();写到确定事件中,就不会跳转了,只是刷新,而把它抽出来变成方法就可以先跳转再刷新

2.跳转传值

点击button也可以传值,但是有一种需求是在点击按钮之后,再点击确定才会传值,故有此解决方案

第一种方案
在跳转页

引入包

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

构造方法

constructor( public router: Router) { }

跳转

    this.router.navigate(['/tabs/order'], {
          queryParams: {
            orderid: 'orderid'
          }
        });
在被跳转页

引入包

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

构造方法

constructor(public activeRoute: ActivatedRoute) {}

接收

this.activeRoute.queryParams.subscribe((params: Params) => {
      this.page = params['orderid'];
 })
第二种方案
跳转页

引入包

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

构造方法

constructor( public router: Router) { }

跳转

this.router.navigate(['/integral-detail'], this.orderid)

在app-routing.module.ts中

{ path: 'tabs/order/:orderid', loadChildren: './order/order.module#TabPageOrderModule' },
被跳转页
this.activeRoute.queryParams.subscribe((params: Params) => {
      this.orderid= params['orderid'];
 })

第二种方案传递的参数会显示在地址栏

目录
相关文章
|
2月前
|
缓存
ionic4 路由跳转刷新实战
ionic4 路由跳转刷新实战
25 0
|
2月前
|
API 数据库
ionic4 接收API数据库传值并显示
ionic4 接收API数据库传值并显示
30 0
|
2月前
ionic4 路由跳转传值
ionic4 路由跳转传值
18 0
ionic3 导航栏返回按钮事件设置 多级页面返回到指定的页面
ionic3 导航栏返回按钮事件设置 多级页面返回到指定的页面
|
JavaScript iOS开发
Ionic 中控件点击延迟的处理
原文发表于我的技术博客 本文分享了在 Ionic 中如何处理控件点击延迟的问题。原文发表于我的技术博客 1. 问题描述 在 Ionic 中,当在 iOS 环境下运行元素的点击事件时,你会发现点击响应事件会出现延迟的情况,此情况会造成用户的操作疑惑。
1046 0
|
缓存 Android开发
ionic中返回刷新问题
最近做ionic项目,发现自带的返回按钮返回回去不会刷新页面,会显示缓存的页面,我数字改变了也没办法 于是发现有个ionic中ionicView的生命周期onicView的生命周期的事件调用在每个ionicView的controller中使用$scope.$on('$ionicView.enter', function() {});调用。
1011 0
|
JavaScript
使用angularjs、ionic框架如何实现返回上一页并刷新
普通的js返回并刷新这里就不多说了,百度就有很多方法。 下面说的是使用了angularjs、ionic开发的一个手机app中使用的一个返回上一页并刷新的方法。
1143 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