title: Issue while handling back button event in ionic2 application with custom routes
body: <p>I've implemented back button code in my ionic 2 application as suggested <a href="https://stackoverflow.com/questions/41373774/how-to-handle-back-button-on-ionic-2">here</a>. but it is not working as expected.</p>
  
  <p>However i'm getting console.log() while back button tapped.</p>
  
  <p>Below is my code for reference.</p>
  
  <p>1) app.routes.ts</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  
  import { Login } from '../pages/Login/Login';
  import { Orders } from '../pages/Orders/Orders';
  import { OrderDetails } from '../pages/Orders/OrderDetails';
  import { AssignOrder } from '../pages/Orders/AssignOrder';
  
  const routes: Routes = [
      {
          path: '', redirectTo: '/Orders',
          pathMatch: 'full'
      },
      {
          path: 'Login',
          component: Login
      },
      {
          path: 'Orders',
          component: Orders
      },
      {
          path: 'OrderDetails/:orderid',
          component: OrderDetails
      },
      {
          path: 'AssignOrder',
          component: AssignOrder
      }
  ];
  
  @NgModule({
      imports: [
          RouterModule.forRoot(routes)
      ],
      exports: [
          RouterModule
      ]
  })
  export class AppRoutingModule { }
  export const routedComponents = [Login, Orders, OrderDetails, AssignOrder];
  </code></pre>
  
  <p>2) app.component.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { App, Platform, ViewController } from 'ionic-angular';
  import { StatusBar } from '@ionic-native/status-bar';
  import { SplashScreen } from '@ionic-native/splash-screen';
  @Component({
    templateUrl: 'app.html'
  })
  
  export class MyApp {
  
    constructor(app: App, platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
      platform.ready().then(() =&gt; {
        // 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();
        if (splashScreen) {
          setTimeout(() =&gt; {
            splashScreen.hide();
          }, 100);
        }
      });
  
      platform.registerBackButtonAction(() =&gt; {
        let nav = app.getActiveNav();
        console.log(nav);
        let activeView = nav.getActive();
        if (activeView != null) {
          console.log('activeView:' + activeView);
          if (nav.canGoBack()) {
            nav.pop();
          } else if (typeof activeView.instance.backButtonAction === 'function')
            activeView.instance.backButtonAction();
          else nav.parent.select(0); // goes to the first tab
        }
        else {
          console.log('activeView is null');
        }
      });
    }
  }
  </code></pre>
  
  <p>3) Orders.ts</p>
  
  <p>In Orders page, if i click back button it will call function in app.component.ts in which i'm getting "activeView" as undefined in <code>let activeView = nav.getActive();</code> line. So, i get "activeView is null" is printed in console.(as mentioned in first solution <a href="https://stackoverflow.com/questions/41373774/how-to-handle-back-button-on-ionic-2">here</a>). Please see <a href="https://i.stack.imgur.com/9BnZ9.png" rel="nofollow noreferrer">this</a> image.</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Router } from '@angular/router';
  import { Platform, AlertController, LoadingController } from 'ionic-angular';
  import { User } from '../../models/User';
  import { Order } from '../../models/Order';
  import { UserService } from '../../providers/UserService';
  import { OrderService } from '../../providers/OrderService';
  
  @Component({
    selector: 'page-Orders',
    templateUrl: 'Orders.html'
    // providers: [UserService, OrderService],
  })
  export class Orders implements OnInit {
    orders: Order[];
    selectedOrder: Order;
    user: User;
    error: any;
    showFilter: boolean;
    Search: any;
    loading: any;
  
    constructor(public router: Router,
      public userService: UserService,
      public orderService: OrderService,
      public platform: Platform,
      public alertCtrl: AlertController,
      public loadingCtrl: LoadingController) {
      this.showFilter = false;
      this.Search = '';
    }
  
    ngOnInit() {
      if (localStorage.getItem('User') == null) {
        this.router.navigate(['/Login']);
      }
      else {
        this.userService.user = JSON.parse(localStorage.getItem('User'));
        this.getOrders();
      }
    }
  
    backButtonAction() {
  
    }
  }
  </code></pre>
  
  <p>4) OrderDetails.ts</p>
  
  <p>In OrderDetails page, if i click back button it will call function in OrderDetails.ts because i'm overriding method of app.component.ts by 
  <code>this.platform.registerBackButtonAction(this.backButtonAction, 10);</code> (as mentioned in second solution <a href="https://stackoverflow.com/questions/41373774/how-to-handle-back-button-on-ionic-2">here</a>). I'm getting "backButtonAction called" in console log too. but it gives me error at <code>this.gotoOrders();</code> line. It can't find gotoOrders() function in 'this'. In debug window, i've expand 'this' and i can't see gotoOrders() function there.  Please see <a href="https://i.stack.imgur.com/x8TMa.png" rel="nofollow noreferrer">this</a> image.</p>
  
  <pre><code>import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
  import { Router, ActivatedRoute, Params } from '@angular/router';
  import { Platform, AlertController, LoadingController } from 'ionic-angular';
  import { User } from '../../models/User';
  import { Order } from '../../models/Order';
  import { UserService } from '../../providers/UserService';
  import { OrderService } from '../../providers/OrderService';
  
  @Component({
    selector: 'page-OrderDetails',
    templateUrl: 'OrderDetails.html'
  })
  export class OrderDetails implements OnInit {
    modal: any;
    @Input() order: Order;
    @Output() close = new EventEmitter();
    user: User;
    loading: any;
    isStaff = this.userService.user.Role == "STAFF";
    navigated = false; // true if navigated here
  
    constructor(public router: Router,
      private route: ActivatedRoute,
      public userService: UserService,
      public platform: Platform,
      public orderService: OrderService,
      public alertCtrl: AlertController,
      public loadingCtrl: LoadingController) {
      this.platform.registerBackButtonAction(this.backButtonAction, 10);
    }
  
    ngOnInit() {
      if (this.userService.user == null) {
        this.userService.logout();
      }
      else {
        this.route.params.forEach((params: Params) =&gt; {
          if (params['orderid'] !== undefined) {
            let orderid = params['orderid'];
            this.navigated = true;
          }
        });
      }
    }
  
    backButtonAction() {
      console.log('backButtonAction called');
      this.gotoOrders();
      // if (this.modal &amp;&amp; this.modal.index === 0) {
      //   this.modal.dismiss();
      // } else {
      //   /* exits the app, since this is the main/first tab */
      //   this.platform.exitApp();
      //   // this.navCtrl.setRoot(AnotherPage);  &lt;-- if you wanted to go to another page
      // }
    }
  
    gotoOrders(): void {
      this.router.navigate(['/Orders']);
    }
  }
  </code></pre>