Ionic Back Button Not Working After Adding a Menu

@philipwalter1978 wrote:

So, I have a login page that is my root component. Upon successful login, I use setRoot() on the NavController to bring up the Home Page. From there, users can go a variety of ways. The back button had been working fine until I tried to add a simple menu to application. The menu is really only there as part of the home screen, to allow users to access two general settings pages and logout. There is no need to access the menu from anywhere else, because once the user leaves the Home Screen (besides the two settings pages), they are off on a workflow that should only allow them to go forward or backward in the workflow. The problem is, once I added the menu, all my back buttons stopped working. They show up on all the deeper pages, but nothing happens when they are tapped, and no information comes up in chrome while debugging.

Here is my system info:

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.0.1

local packages:

    @ionic/app-scripts : 2.1.3
    Cordova Platforms  : android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.6.0

System:

    Android SDK Tools : 25.2.5
    Node              : v6.11.2
    npm               : 3.10.10
    OS                : Windows 10

Here is my app.component.ts

import { Component } from '@angular/core';
import { Platform, Events } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = 'LoginPage';
  public user : any = {};
  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, events: Events) {
    events.subscribe('user:login', (userInfo) => {
      console.log('Subscription recieved!');
      console.log(userInfo);
      this.user = {
        'firstName' : userInfo.firstname,
        'lastName' : userInfo.lastname,
        'email' : userInfo.userID
      }
    });
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

Here is the app.html

<ion-menu id="mainMenu" [content]="appContent">
  <ion-content>
    <div class="menuInfo">
      <p>Welcome back, {{user.firstName}} {{user.lastName}}!
    </div>
    <ion-list>
      <ion-item menuClose detail-none>Close Menu</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>
<ion-nav #appContent [root]="rootPage"></ion-nav>

On successful login, LoginPage does this:

this.events.publish('user:login', this.user.getCurrentUser());
        this.navCtrl.setRoot('HomePage', { 'availableClinics' : this.user.getCurrentUser().clinics } );

Then the header for home.html looks like this:

<ion-header>
  <ion-navbar>
        <button ion-button icon-only left menuToggle>
          <ion-icon name="menu"></ion-icon>
        </button>
    <ion-title>
      <img src="assets/images/advancedtissueSmartRxSmallWide.png" />
    </ion-title>
  </ion-navbar>
</ion-header>

That works fine, with the menuToggle button bringing up the menu fine. I have several buttons on the homepage, one of which does the following:

  openTestPage() {
    this.menuCtrl.enable(false, 'mainMenu');
    this.navCtrl.push('TestPage');
  }

The header in test.html looks like this:

  <ion-navbar>
    <ion-title>Test</ion-title>
  </ion-navbar>

I see a back button on the test page, but nothing at all happens when the button is tapped. Any thoughts on how I might recover the back button functionality?

I am testing entirely on Android at the moment, just so you know.

Thanks!

Philip

Posts: 1

Participants: 1

Read full topic