What is the correct way to navigate across tabs in Angular?-CodePudding

In my project I am using Angular 13 / Ionic 6. My project contains tabs for each of the main sections of the app, and then a few of the tabs have sub sections within that tab.

I'm noticing some odd behavior when trying to navigate to a sub section within one of my tabs from another tab.

For example sake, this is my routes for my app:

/app/tabs/home
/app/tabs/section1
/app/tabs/section2
/app/tabs/section2/sub-section

Here are my routing modules:

app-routing.module.ts

const routes: Routes = [
  {
    path: 'app',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  },
  {
    path: 'consent',
    loadChildren: () => import('./pages/consent/consent.module').then( m => m.ConsentPageModule)
  },
  {
    path: '',
    redirectTo: 'consent',
    pathMatch: 'full'
  },
];

tabs-routing.module.ts:

const routes: Routes = [
    {
        path: 'tabs',
        component: TabsPage,
        children:
        [
            {
                path: 'home',
                loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
            },
            {
                path: 'section1',
                loadChildren: () => import('./section1/section1.module').then( m => m.Section1PageModule)
            },
            {
                path: 'section2',
                loadChildren: () => import('./section2/section2.module').then( m => m.Section2PageModule)
            },
            {
                path: 'section3',
                loadChildren: () => import('./section3/section3.module').then( m => m.Section3PageModule)
            },
            {
                path: '',
                redirectTo: '/tabs/home',
                pathMatch: 'full'
            }
        ]
    },
    {
        path: '',
        redirectTo: '/tabs/home',
        pathMatch: 'full'
    }
];

section2-routing.module.ts:

const routes: Routes = [
  {
    path: '',
    component: Section2Page
  },
  {
    path: 'sub-section',
    loadChildren: () => import('./sub-section/sub-section.module').then( m => m.SubSectionPageModule)
  },
  {
    path: 'sub-section2',
    loadChildren: () => import('./sub-section2/sub-section2.module').then( m => m.SubSection2PageModule)
  },
  {
    path: 'sub-section3',
    loadChildren: () => import('./sub-section3/sub-section3.module').then( m => m.SubSection3PageModule)
  },
];

When I try to use the routerLink in my /app/tabs/home to link to /app/tabs/section2/sub-section it creates an odd behavior. There is no animation or slide transition between sections and the screen goes white for a second and then loads the new view.

I even tried to use the Router service from a click method and had the same experience.

Any thoughts around what may be causing this?

CodePudding user response：

First of all, I would like to point out that your concept itself is not "best practice".

If you really need to devide the tabs into subsections then it's better to not use pages but use actual sections within the same page. Or use idependent pages if the "sections" are not directly related to their respective tabs.

For the moment try adding a wild card at the end of the routes array. That and navigate with Router.navigate instead of routerlink.

CodePudding user response：

You can achieve it using Angular Animation.

Import the BrowserAnimationsModule.

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

imports: [
    BrowserAnimationsModule, 
    BrowserModule,
    AppRoutingModule
]

Wrap the Router Outlet

import { slider } from './route-animation.ts';

@Component({
  selector: 'app-root',
  animations: [ slider ]
})

prepareRoute(outlet: RouterOutlet) {
  return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
}

Create route-animation.ts file

export const slider =
  trigger('routeAnimations', [
    transition('* <=> *', [
      query(':enter, :leave', [
        style({
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%'
        })
      ], { optional: true }),
      query(':enter', [
        style({ left: '-100%'})
      ]),
      group([
        query(':leave', [
          animate('600ms ease', style({ left: '100%'}))
        ], { optional: true }),
        query(':enter', [
          animate('600ms ease', style({ left: '0%'}))
        ])
      ]),    
      // Required for child animations on the page
       query(':leave', animateChild()),
       query(':enter', animateChild()),
  ]),
]);