anderlaini
anderlaini

Reputation: 1821

ionic 4 - android back button not working for tab-bar routes

The navigation of my app is basically:

  1. app intro screen
  2. login screen
  3. tab-bar screen with 5 different tabs

So, after user logs in, when I click on Android Back Button, it comes back to login page.

I'm expecting to go back to previous navigated page/tab.

It looks like the router is not considering routes inside tabs page.

My app.routes

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

import { AppintroGuard } from './guards/appintro.guard';
import { AuthGuard } from './guards/auth.guard';

const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule', canActivate: [AuthGuard, AppintroGuard] },
  { path: 'appintro', loadChildren: './appintro/appintro.module#AppintroPageModule' },
  { path: 'auth-login', loadChildren: './auth-login/auth-login.module#AuthLoginPageModule' },
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

My /pages/tabs/tabs.router.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab-monitoring',
        children: [
          {
            path: '',
            loadChildren: '../tab-monitoring/tab-monitoring.module#TabMonitoringPageModule'
          },
          {
            path: 'tab-monitoring-filter',
            children: [
              {
                path: '',
                loadChildren: '../tab-monitoring-filter/tab-monitoring-filter.module#TabMonitoringFilterPageModule'
              }
            ]
          }
        ]
      },
      {
        path: 'tab-attachments',
        children: [
          {
            path: '',
            loadChildren: '../tab-attachments/tab-attachments.module#TabAttachmentsPageModule'
          }
        ]
      },
      {
        path: 'tab-dashboard',
        children: [
          {
            path: '',
            loadChildren: '../tab-dashboard/tab-dashboard.module#TabDashboardPageModule'
          }
        ]
      },
      {
        path: 'tab-progress',
        children: [
          {
            path: '',
            loadChildren: '../tab-progress/tab-progress.module#TabProgressPageModule'
          },
          {
            path: 'readjusts',
            children: [
              {
                path: ':id_painel',
                loadChildren: '../tab-readjusts/tab-readjusts.module#TabReadjustsPageModule'
              }
            ]
          },
          {
            path: 'project',
            children: [
              {
                path: ':id_projeto/:id_painel',
                loadChildren: '../tab-project/tab-project.module#TabProjectPageModule'
              },
              {
                path: ':id_projeto/:id_painel/readjusts',
                loadChildren: '../tab-readjusts-project/tab-readjusts-project.module#TabReadjustsProjectPageModule'
              }
            ]
          }
        ]
      },
      {
        path: 'tab-user',
        children: [
          {
            path: '',
            loadChildren: '../tab-user/tab-user.module#TabUserPageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/tab-dashboard',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab-dashboard',
    pathMatch: 'full'
  }
];

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

export class TabsPageRoutingModule {}

Am I doing something wrong?

My login function callback:

this.authService.login(f.value.usuario, f.value.senha).subscribe(
  data => {
    this.authService.loadInitialData().then(value => {
      this.router.navigateByUrl('/tabs', {replaceUrl:true});
    });
  },
  error => {
    console.log('auth error');
    this.auth_error = true;
    this.is_loading = false;
  },
  () => { }
);

Upvotes: 0

Views: 650

Answers (1)

Mayank Girdhar
Mayank Girdhar

Reputation: 11

you can try this to set a page as root

this.router.navigateByUrl(/* alternative root page */);

for example

this.router.navigateByUrl('tabs/tab-user');

Upvotes: 1

Related Questions