欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-06 19:59:19
...

点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'];
 })

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

相关标签: ionic 4