ioni c получать передаваемые данные со страницы на страницу

Question

Я перехожу со страницы на другую страницу в ioni c 5 и передаю данные в качестве параметров навигации, навигация уже выполняется правильно, но я не могу получить переданные данные на странице сведений. HomePage.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);
    });
*/
  }

}

Я получил эту ошибку: «Свойство sub» не существует для типа «ProductsPage». »

Answer 1

На этот же вопрос был дан ответ:

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

Answer 2

Есть 2 варианта:

Вариант 1: NavController:

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