Hardware backbutton Issue with ion-tabs

I have an app with 3 tabs. The main one has a list of items that when clicked open a page with item details.
I’m using this code below to exit the app when the hardware back button is pressed on Android:

import { Component, ViewChild } from '@angular/core';
import { Platform, IonRouterOutlet } from '@ionic/angular';
import { App } from '@capacitor/app';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {

  @ViewChild(IonRouterOutlet, { static : true }) routerOutlet: IonRouterOutlet;

  constructor(private platform: Platform) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(async () => {

      App.addListener('backButton', () => {
        if (!this.routerOutlet.canGoBack()) {
          App.exitApp();
        }
      });

    });
  }
}

When I navigate to a item detail page and hit the backbutton, this.routerOutlet.canGoBack() is always returning false, and so exiting the app.

My list loop is like this:

<ion-item *ngFor="let i of items" [routerLink]="['/','items',p.Id]">

The tabs html are located at route ‘/items’ and the items list is located at ‘/ordinary’.

tabs.html:

<ion-tabs>
  <ion-tab-bar>

    <ion-tab-button tab="ordinary">
      <ion-label>Ordinary Items</ion-label>
      <ion-icon name="pricetag-outline"></ion-icon>
    </ion-tab-button>
    
  </ion-tab-bar>
</ion-tabs>

My items-routing.module.ts:

const routes: Routes = [

  {
    path: '',
    component: ItemsPage,
    children: [
     {
        path: 'ordinary',
        children: [
          {
            path: '',
            loadChildren: () => import('./ordinary/ordinary.module').then(m => m.OrdinaryPageModule)
          }
        ]
      },      
      {
        path: ':itemId',
        loadChildren: () => import('./details/details.module').then(m => m.OrdinaryPageModule)
      },
      {
        path: '',
        redirectTo: '/items/ordinary',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/items/ordinary',
    pathMatch: 'full'
  }
];

Maybe this.routerOutlet.canGoBack() is returning false because the details page path is ‘items:itemId’, effectively ‘items/id’? Or maybe something else I can’t see?

1 post - 1 participant

Read full topic