DEV Community

Juraj Chovan
Juraj Chovan

Posted on

Naspäť na predchádzajúcu stránku v Ionic (ver.5) aplikácii

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
Enter fullscreen mode Exit fullscreen mode

Image description
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>
Enter fullscreen mode Exit fullscreen mode

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();
  }
}
Enter fullscreen mode Exit fullscreen mode

Stránka teraz bude vyzerať:

Image description
a po kliknutí na ikonku šípky ma to vráti na predchádzajúcu stránku v aplikácii.

Top comments (0)