离子检索从一页传递到另一页

Question

我在ionic 5中从一个页面导航到另一个页面，并将数据作为导航参数传递，它已经正确导航了，但我无法在详细信息页面中检索传递的数据。主页.ts:

this.navCtrl.navigateRoot(['products', {item: 'data value'}]);

Products.ts(详情页(：

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-products',
templateUrl: './products.page.html',
styleUrls: ['./products.page.scss'],
})
export class ProductsPage implements OnInit {
private activatedRoute: ActivatedRoute
constructor() {
this.sub = this.route.params.subscribe(params => {
this.id = params.id; 
});
}

ngOnInit() {
/*   this.activatedRoute.params.subscribe((params) => {
console.log('Params: ', params);
});
*/
}
}

我得到了这个错误："类型"ProductsPage"上不存在属性"sub"。"，

Answer 1

有两个选项：

选项1：导航控制器：

// Send Parameter
import { NavController } from '@ionic/angular';
import { NavigationExtras } from '@angular/router';
//...
constructor(public navCtrl: NavController) { }
//...
let navigationExtras: NavigationExtras = {
queryParams: {
currency: JSON.stringify(currency),
refresh: refresh
}
};
this.navCtrl.navigateForward(['page-slug'], true, navigationExtras);

-

// Receive Parameter
import { ActivatedRoute } from "@angular/router";
//...
constructor(private route: ActivatedRoute) {}
//...
this.route.queryParams.subscribe(params => {
this.refresh = params["refresh"];
this.currency = JSON.parse(params["currency"]);
});

选项2：路由器：

// Send Parameter
import { Router } from '@angular/router';
//...
constructor(private router: Router) {}
goToProductDetails(id) {
this.router.navigate(['/product-details', id]);
}

-

// Receive Parameter
import { ActivatedRoute } from '@angular/router';
//...
id: any;
constructor(private route: ActivatedRoute) {}
//...
this.sub = this.route.params.subscribe(params => {
this.id = params['id']; 
});

Answer 2

相同的问题已在以下位置得到回答：

https://forum.ionicframework.com/t/how-to-pass-data-from-1-page-to-another-using-navigation-in-ionic-4/151060/2