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)