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".
...
Top comments (0)