Ak potrebujem v Ionic (ver.5) aplikácii pridať na stránku funkcionalitu návratu na predchádzajúcu stránku možno to urobiť aj nižšie popísaným spôsobom.
V Ionic aplikácii mám vytvorenú nejakú stránku, napr.:
http://localhost:8100/removed
a na tejto stránke chcem v jej záhlaví (v pravej časti, lebo v ľavej už mám ikonku na zobrazenie aplikačného side-menu) umiestniť ikonku šípky, kliknutím na ktorú sa vrátim na predchádzajúcu stránku aplikácie (stránku z ktorej som tu prišiel).
Súbor s layout-om stránky, tj.HTML kód v súbore "removed.page.html" upravím/doplním takto:
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Removed 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>
a ešte v súbore logiky stránky, tj.v "removed.page.ts" je potrebné doplniť volanú funkciu "previousPage()", ako aj použitie "NavController", ktorý zabezpečuje samotnú navigáciu v Ionic aplikácii. Upravený/doplnený kód vyzerá asi takto:
import { Component, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';
@Component({
selector: 'app-removed',
templateUrl: './removed.page.html',
styleUrls: ['./removed.page.scss'],
})
export class RemovedPage implements OnInit {
pageContent = null;
constructor(
private navCtrl: NavController,
) { }
ngOnInit() {
...
}
// naspat na predchadzajucu stranku:
previousPage() {
this.navCtrl.back();
}
}
Stránka teraz bude vyzerať:
a po kliknutí na ikonku šípky ma to vráti na predchádzajúcu stránku v aplikácii.
Top comments (0)