离子检索从页面到页面传递数据

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