V Ionic (ver.5) odovzdať parametre zo stránky na ďalšiu stránku

V nasledujúcom postupe je ukázané ako v Ionic (ver.5) aplikácii možno odovzdať parametre (hodnoty) z jednej stránky na ďalšiu stránku.
V aplikácii mám stránku "page01", v ktorej zobrazujem nejaký zoznam položiek. Po kliknutí na konkrétnu položku v tomto zozname chcem zobraziť stránku "page02" kde budú detaily (alebo nejaké ďalšie informácie) o vybratej položke. Pred zobrazením "page02" odovzdám zo stránky "page01" niektoré parametre.
Layout stránky "page01.page.html" je napr.:

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>accepted buddies ({{ pageContent?.Rows }})</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="previousPage()"><ion-icon name="arrow-back"></ion-icon></ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card *ngFor="let User of pageContent?.Users">
    <ion-item>
      <ion-avatar slot="start" (click)="showPosition(User.AcID,User.FirstName,User.LastName,User.DistanceFromUser,User.Lat,User.Lng)">
        <img alt="{{ User.FirstName }} {{ User.LastName }}" 
        src="http://.../{{ User.Location }}/{{ User.FileName }}" />
      </ion-avatar>
      <ion-label (click)="showPosition(User.AcID,User.FirstName,User.LastName,User.DistanceFromUser,User.Lat,User.Lng)">
        <h2><strong>{{ User.FirstName }} {{ User.LastName }}</strong> ({{ User.AcID }})</h2>
        <h3><strong>{{ User.DistanceFromUser }}</strong> ({{ User.updated_at }})</h3>
      </ion-label>
    </ion-item>
   ...
</ion-content>

tj.po kliknutí na avatar, resp.po kliknutí na informáciu o mene položky sa volá funkcia "showPosition()" s niekoľkými parametrami (AcID, FirstName, LastName, DistanceFromUser, Lat, Lng).
Súbor logiky tejto stránky, tj."page01.page.ts" má približne tento kód:

import { NavigationExtras } from '@angular/router';
export class Page01Page implements OnInit {
   ...
showPosition(BuddyID,BuddyFirstName,BuddyLastName,BuddyDistanceFromUser,BuddyLat,BuddyLng)  {
    const navParams: NavigationExtras = {
      queryParams: {
        BuddyID: JSON.stringify(BuddyID),
        BuddyName: BuddyFirstName+' '+BuddyLastName,
        BuddyDistanceFromUser: '('+BuddyDistanceFromUser+')',
        BuddyLat: BuddyLat,
        BuddyLng: BuddyLng
      }
    };
    this.navCtrl.navigateForward(['page02'], navParams);
  }
  ...

tj.je tu definovaná funkcia "showPosition()", v ktorej definujem odovzdávané parametre (a ich hodnoty) cez "navParams", a túto sadu potom odovzdávam vo volaní stránky "page02".
V stránke "page02" mám potom v súbore logiky stránky "page02.page.ts" približne tento kód:

import { ActivatedRoute } from "@angular/router";
...
export class Page02Page implements OnInit {
  BuddyID = null;
  NextParameter = null;
  BuddyName: string;
  BuddyDistanceFromUser = null;
  BuddyLat = null;
  BuddyLng = null;
  ...
  constructor(
    private navCtrl: NavController,
    private route: ActivatedRoute
  ) { }
  ngOnInit() {
    this.route.queryParams.subscribe(params=>{
      this.BuddyID = JSON.parse(params['BuddyID']);
      this.BuddyName = params['BuddyName'];
      this.BuddyDistanceFromUser = params['BuddyDistanceFromUser'];
      this.BuddyLat = params['BuddyLat'];
      this.BuddyLng = params['BuddyLng'];
    });
    this.displayMap();
  }
  ...
  displayMap()  {
    // nejaká funkcia, ktorá na stránke zobrazi mapu s určenou polohou
    ...
  }

Tj.v inicializácii (volanej) stránky "page02" sa prevezmú parametre (a ich hodnoty) z predchádzajúcej (volajúcej) stránky "page01", a tieto sa priradia do interných premenných tejto stránky. Ďalej sa volá funkcia "displayMap()", ktorá zobrazí mapu a v nej vyznačí informácie, ktoré sú prevzaté z "page01".
A ešte pre úplnosť layout stránky "page02.page.html" vypadá asi takto:

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>{{ BuddyName }} <small>{{ BuddyDistanceFromUser }}</small></ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="previousPage()"><ion-icon name="arrow-back"></ion-icon></ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen="true" slot="fixed">
  <div class="ion-padding">

    <div id="profile-container1" style="text-align:center;">
      <div id="mapContainer" style="width:100%;height:600px;"></div>
      <small>GPS: {{ BuddyLat }} / {{ BuddyLng }}</small>
    </div>
  </div>

</ion-content>

tj.na stránke "page02" sú zobrazené prevzaté informácie z "page01".
...