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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yujing1314/article/details/90105508

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

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