IONIC 4 - Angular 路由参数

Question

我正忙于将旧的 IONIC 应用程序升级到 IONIC 4，一切进展顺利，但是我找不到任何详细说明如何在 [=38= 的路由中传递数据和使用页面的信息].

这是问题的代码片段：

旧代码

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

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

新代码

this.navCtrl.navigateRoot('vendor/vendor-booking-dashboard-progress'); -- 这是 booking: temp 参数丢失的地方，必须包含以及硬编码 URL 其中应该包含页面引用但需要字符串参数。

我可以接受硬编码 URL，但参数是关键，需要知道如何实现。

Answer 1

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

使用查询参数

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

服务和解决函数（合法）

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

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

使用附加状态（自 Angular 7.2 以来新增）

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

参考：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) {
}

//this should be within a function
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);
  }
}
}

IONIC 4 - Angular 路由参数

IONIC 4 - Angular Routing Parameters

url-routing

ionic-framework

angular

ionic4