CODEWITHSUNDEEP
angularionic-frameworkionic4
Jeremy Thomas
Jeremy Thomas

Reputation: 6674

Ionic 4 and tabs, back button never shows

I am new to the angular routing methods and cannot get my back button to display without including a default route which is not ideal. I have a simple menu that links to an ion-tabs page, but no tabs header display the back button and the router returns false when I call ionRouterOutlet.canGoBack().

App.module

@NgModule({
  declarations: [
    AppComponent,
  ],
  entryComponents: [],
  imports: [
    PipesModule,
    MomentModule,
    FormsModule,
    BrowserModule,
    BrowserAnimationsModule,

    IonicModule.forRoot({
      mode: 'ios'
    }),
    IonicStorageModule.forRoot(),
    ClientsModule,
    ManagerDashboardPageModule,
    AppRoutingModule,
    HttpClientModule,
    SharedModule,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptorService,
      multi: true
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: LoaderInterceptorService,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

AppRoutingModule

export const routes: Routes = [
  {
    path: 'login',
    // component: LoginPage,
    loadChildren: './pages/login/login.module#LoginPageModule'
  },
  {
    path: 'users/:id/edit',
    loadChildren: "./pages/users/edit/edit.module#EditPageModule"
  },
  {
    path: 'users/edit',
    loadChildren: "./pages/users/edit/edit.module#EditPageModule"
  },
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'edit', loadChildren: './pages/users/edit/edit.module#EditPageModule' },
  { path: 'consultations', loadChildren: './pages/manager-dashboard/consultations/consultations.module#ConsultationsPageModule' },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      preloadingStrategy: PreloadAllModules,
      enableTracing: true
    }),
  ],
  exports: [RouterModule]
})

export class AppRoutingModule { }

I've seperated all manager routing into a seperate routing module that I import into ManagerDashboardPageModule. Here are the routes.

ManagerDashboardRoutingModule

const managerRoutes: Routes = [
  {
    path: 'manager-dashboard',
    component: ManagerDashboardPage,
    canActivate: [AuthGuard],
    canActivateChild: [AuthGuard],
    children: [
      {
        path: 'consultations',
        component: ConsultationsPage,
      },
      {
        path: 'weigh-ins',
        component: ConsultationsPage
      },
      {
        path: 'finance',
        component: ConsultationsPage
      },
      {
        path: '',
        redirectTo: 'consultations',
        pathMatch: 'full'
      }
    ]
  },
];

@NgModule({
  imports: [
    RouterModule.forChild(managerRoutes),
    ConsultationsPageModule,
  ],
  exports: [RouterModule]
})

export class ManagerDashboardRoutingModule {}

This is a tabs page and when I navigate to /manager-dashboard the ConsultationPage is displayed but all information regarding previous routes is unknown and I cannot go back:

ConsultationPage

export class ConsultationsPage implements OnInit {

  constructor( private router: Router,
               private ionRouterOutlet: IonRouterOutlet,
               private global: GlobalsService ) { }

  ngOnInit() {
    console.log(this.ionRouterOutlet.canGoBack()) // prints false
  }    
}

Is there anything I can do to allow going back?

Upvotes: 0

Views: 1086

Answers (1)

anymeshsingh
anymeshsingh

Reputation: 271

A simple solution to this problem is to don't use ion-back-button and instead use ion-button inside ion-buttons like this:

<ion-buttons slot="start">
  <ion-button (click)="previous()">
    <ion-icon name="arrow-back"></ion-icon>
  </ion-button>
</ion-buttons>

you can perform any action and also navigate by using @angular/router in the previous() method or just use the href property directly to navigate.

Upvotes: 2

Related Questions