IONIC 4-角路由参数

Question

我正在忙于升级旧的IONIC app to IONIC 4，并且进展顺利，但是我找不到能够详细说明如何在Angular的路由中传递数据和使用页面的任何东西。

这里是问题的代码片段：

旧代码

this.navCtrl.setRoot(VendorBookingDashboardProgressPage, { booking: temp });

在上面的代码中，您将看到booking：temp作为附加数据的参数传递，并且VendorBookingDashboardProgressPage是要导航到的参考页。

新代码

this.navCtrl.navigateRoot('vendor/vendor-booking-dashboard-progress');

-这是预订：临时参数丢失的地方，必须包含它，以及硬编码URL应当在其中包含页面引用，但需要一个字符串参数。

我可以对URL进行硬编码，但是参数很关键，请知道如何实现。

Answer 1

您可以尝试以下方法在页面之间传递数据

1. 使用查询参数

   let navigationExtras: NavigationExtras = {
      queryParams: {
        special: JSON.stringify(this.user)
      }
    };
    this.router.navigate(['details'], navigationExtras);

2. 服务和解决功能（合法）

  setData(id, data) {
    this.data[id] = data;
  }

  getData(id) {
    return this.data[id];
  }

3. 使用Extras状态（自Angular 7.2起新）

    let navigationExtras: NavigationExtras = {
      state: {
        user: this.user
      }
    };
    this.router.navigate(['details'], navigationExtras);

Ref：https://ionicacademy.com/pass-data-angular-router-ionic-4/

Answer 2

尝试使用导航额外的功能，例如：

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

constructor( public navCtrl: NavController) {
}

const navigationExtras: NavigationExtras = {
      queryParams: {
        special: JSON.stringify(temp)
      }
};
this.navCtrl.navigateRoot(['vendor/vendor-booking-dashboard-progress'], 
navigationExtras);

然后从路由到的页面中检索它，请在页面的ts文件中尝试：

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

data: any;

constructor(
  public activatedRoute: ActivatedRoute,
  private router: Router) {
}

ngOnInit(){
  this.activatedRoute.queryParams.subscribe(params => {
  if (params && params.special) {
    //store the temp in data
    this.data = JSON.parse(params.special);
  }
}
}