Retrieving the name of the current page in ionViewCanEnter

Question

Retrieving the name of the current page in ionViewCanEnter

While working with Ionic 2, I am currently facing a challenge in identifying the name of the page that triggered the navigation (PUSHER) before entering the destination page (PUSHEE).

Within the PUSHEE page, I have an ionViewCanEnter function where I need to determine the name of the PUSHER page. However, when I attempt to use NavController to retrieve the active page, it returns undefined. Although the NavController itself is not undefined, the response from getActive is. Can anyone recommend a solution for obtaining the name of the PUSHER page?

ionViewCanEnter(): boolean {
    console.log('active page', this.navCtrl.getActive());
    return true;
}

angular typescript ionic2

Answer 1

Answer №1

As far as I know, there is currently no straightforward method for retrieving the name of the active page. However, you can pass a string parameter through PUSHER like this:

this.navCtrl.push(HomePage, {pusherName: "MyPageName"});

Then, in the PUSHEE component:

ionViewCanEnter(): boolean {
    console.log('active page', this.navParams.get(pusherName));
    return true;
}

Edit: It's worth mentioning that you can obtain the class name (and consequently the page name) using the following code:

(this).constructor.toString()

In my testing, however, the constructor's name may be removed during ionic --prod execution. So, it's important to verify any alternative methods under --prod conditions.

Answer 2

As far as I know, there is currently no straightforward method for retrieving the name of the active page. However, you can pass a string parameter through PUSHER like this:

this.navCtrl.push(HomePage, {pusherName: "MyPageName"});

Then, in the PUSHEE component:

ionViewCanEnter(): boolean {
    console.log('active page', this.navParams.get(pusherName));
    return true;
}

Edit: It's worth mentioning that you can obtain the class name (and consequently the page name) using the following code:

(this).constructor.toString()

In my testing, however, the constructor's name may be removed during ionic --prod execution. So, it's important to verify any alternative methods under --prod conditions.

Answer 3

Answer №2

I successfully navigated back to the previous page by utilizing the getViews method.

ionViewCanEnter(): boolean {
    console.log('getViews', this.navCtrl.getViews());
    var all_views = this.navCtrl.getViews();
    var last_view = all_views[all_views.length-1];
    var last_view_name = last_view.name;
}

Answer 4

I successfully navigated back to the previous page by utilizing the getViews method.

ionViewCanEnter(): boolean {
    console.log('getViews', this.navCtrl.getViews());
    var all_views = this.navCtrl.getViews();
    var last_view = all_views[all_views.length-1];
    var last_view_name = last_view.name;
}

Answer 5

Answer №3

Here is a straightforward example demonstrating how to redirect to another page:

<button ion-button  (click)="goToHomePage();">Home Page</button>

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { HomePage } from '../home/home';

@IonicPage()
@Component({
  selector: 'page-level',
  templateUrl: 'level.html',
})
export class LevelPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

goToHomePage() {
 this.navCtrl.push(HomePage);
}

}

Answer 6

Here is a straightforward example demonstrating how to redirect to another page:

<button ion-button  (click)="goToHomePage();">Home Page</button>

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { HomePage } from '../home/home';

@IonicPage()
@Component({
  selector: 'page-level',
  templateUrl: 'level.html',
})
export class LevelPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

goToHomePage() {
 this.navCtrl.push(HomePage);
}

}

Retrieving the name of the current page in ionViewCanEnter

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to create a TypeScript function that merges actions together?

Differentiate the array type within an object in TypeScript

Tips for verifying that parameters possess designated characteristics in TypeScript

How come I am unable to fetch classes and enums from a namespace?

Issue encountered while importing supercluster in TypeScript (TypeError: Unable to assign property 'options' to an undefined variable)

Tips for assigning an ID to a delete button when utilizing setValue in Angular 6

Customizing the Global Error Handler in Angular

Different ways to update the AutoComplete Style attribute

Declaring scoped runtime interfaces with Typescript

Angular4: Sharing breadcrumb view components via the router's `data` attribute

In Angular 10, the custom CSS URL is loading after the standard styles.css file

Import resolves Uncaught ReferenceError by preventing access to 'xx' before it is initialized

Angular 2: Enhancing Tables

Is Drizzle ORM able to handle decimal values in MySQL as strings?

Excessive repetition in the style of writing for a function

step-by-step guide to leveraging the heatmap functionality of google maps with angular agm

Tips for deploying an Angular 2+ application on the OpenShift platform

Sorting complex strings in Typescript based on the dates contained within them

Locate and modify a single item in a list using NGRX

"Embracing the power of multiple inheritance with Types