Trouble arises when trying to navigate to a new page from ion-tabs within Ionic 2

Question

Trouble arises when trying to navigate to a new page from ion-tabs within Ionic 2

I recently developed a chat application that redirects users to a tabs page upon login.

 <ion-tabs tabsPlacement="top" color="header" tabsHighlight=true>
  <ion-tab [root]="tab1" tabTitle="Chats" tabIcon="chatbubbles"></ion-tab>
  <ion-tab [root]="tab2" tabTitle="Groups" tabIcon="contacts"></ion-tab>
  <ion-tab [root]="tab3" tabTitle="Profile" tabIcon="contact"></ion-tab>
</ion-tabs>

https://i.sstatic.net/k8tRk.png

After logging in, I tried to retrieve the active page from the tabs using
```
console.log(this.navCtrl.getActive().name);
```
. However, it returns undefined. Can someone explain why?
When I navigate to a new page by clicking the app icon on the header with
```
this.navCtrl.push('FriendsPage');
```
, the current active page displays the previous page name "ChatPage" instead of "FriendsPage" https://i.sstatic.net/nWG38.png

Edit: Added backbutton action

      this.platform.registerBackButtonAction(() => {
    let activePortal = this.ionicApp._loadingPortal.getActive() ||
      this.ionicApp._modalPortal.getActive() ||
      this.ionicApp._toastPortal.getActive() ||
      this.ionicApp._overlayPortal.getActive();
    if (activePortal) {
      activePortal.dismiss();
    } else {
      if (this.nav.canGoBack()) {
        this.nav.pop();
      } else {
        if (this.nav.getActive().name === "LoginPage"||this.nav.getActive().name === "SignupPage") {
          this.platform.exitApp();
        }else {
          this.generic.showAlertConfirm("Exit", "Do you want to exit the app?", this.onYesHandler, this.onNoHandler, "backPress");
        }
      }
    }
  })

In my scenario, when a user goes to the FriendsPage from the tabs and presses the hardware back button, an alert message pops up instead of the view simply popping as expected.

this.generic.showAlertConfirm("Exit", "Do you want to exit the app?", this.onYesHandler, this.onNoHandler, "backPress");

I would appreciate any assistance in resolving this issue.

Warm Regards,

Anand Raj

angular typescript ionic2

Answer 1

Answer №1

I encountered a similar issue to yours and have yet to uncover the reason behind it. However, I did discover a solution to retrieve the correct page name.

Within app.component.ts, insert the following code:

import { App } from 'ionic-angular';
constructor(private app: App){
}
ngAfterViewInit() { 
    this.app.getActiveNav().viewWillEnter.subscribe(event => {
      console.log("current page", event.id);  <== This is what you require
    })
}

Now you can access the page name in every viewWillEnter event without needing to add code to each individual page.

Answer 2

I encountered a similar issue to yours and have yet to uncover the reason behind it. However, I did discover a solution to retrieve the correct page name.

Within app.component.ts, insert the following code:

import { App } from 'ionic-angular';
constructor(private app: App){
}
ngAfterViewInit() { 
    this.app.getActiveNav().viewWillEnter.subscribe(event => {
      console.log("current page", event.id);  <== This is what you require
    })
}

Now you can access the page name in every viewWillEnter event without needing to add code to each individual page.

Trouble arises when trying to navigate to a new page from ion-tabs within Ionic 2

Edit: Added backbutton action

Answer №1

Similar questions

Create a placeholder class for the Form Builder group component within an Angular application

Tips for utilizing method overload in TypeScript with a basic object?

Error code TS7053 occurs when an element implicitly has an 'any' type because a string expression cannot be used to index an empty object

Creating a declaration of an array containing key value pairs in Typescript

Angular does not display a loading indicator in the header

What is the process of creating a for loop in FindById and then sending a response with Mongoose?

Firestore data displaying as null values

"Attempting to verify a JSON Web Token using a promise that returns an object not compatible with the specified

Angular 6 Error: Unable to access property 'e4b7...f' as it is undefined

When interacting with the iframe in an Ionic3 app, it suddenly crashes

The compiler does not recognize the TSConfig option 'lib' - please review and correct

Steps to successfully pass a reference from a parent component to a child component that utilizes TouchableOpacity in React Native

Enhance your Next.js application by including the 'style' attribute to an element within an event listener

Creating void functions in TypeScript

Google Chrome - Automatically scroll to the bottom of the list when new elements are added in *ngFor loop

Angular - Automatically create thumbnails for uploaded images and videos

What is the reason behind the warning about DOM element appearing when custom props are passed to a styled element in MUI?

Updating webdriver-manager can sometimes result in a "spawn Unknown system error -86" message. This error

The NestJs project fails to display the updates when using the "tsc" command before running either "npm run start" or "npm run start:dev"

What is the best way to execute the Angular build output (dist folder, artifact)?