DEV Community

Juraj Chovan
Juraj Chovan

Posted on

1 1

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.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay