离子 Angular 路由与标签

Question

I have the following in app-routing.module:

const routes: Routes = [
  {
    path: 'displayfile/:navitemid',
    loadChildren: () => import('./pages/file-viewer/file-viewer.module').then( m => m.FileViewerPageModule),
    canActivate: [DisplayFileGuardService]
  },
  {
    path: 'file-viewer',
    loadChildren: () => import('./pages/file-viewer/file-viewer.module').then( m => m.FileViewerPageModule)
  },
  {
    path: 'settings',
    loadChildren: () => import('./pages/settings/settings.module').then( m => m.SettingsPageModule)
  },
  { 
    path: '',
    loadChildren: () => import('./pages/file-viewer/file-viewer.module').then( m => m.FileViewerPageModule),
  }
];

A URL like "http://localhost:8100/displayfile/1234" should match the first route. It was doing so before I refactored my app to introduce a tabbed interface. But it just seems to ignore this route.

My file-viewer-routing.module where the tabs live lis included below. I've read docs and tried many different combinations without success. I've got logging in the "DisplayFileGuardService" constructor and canActivate methods. So I know it is not hit. If I add that guard to the last route then it does get hit with the URL that is failing above. Why is it falling through to the empty route and ignoring my displayfile route?

const routes: Routes = [
  {
    path: 'tabs',
    component: FileViewerPage,
    children: [
      {
        path: 'tab1',
        loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule),
        //canActivate: [DisplayFileGuardService]
      },
      {
        path: 'tab2',
        loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
      },
      {
        path: 'tab3',
        loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
      },
      {
        path: 'tab4',
        loadChildren: () => import('../tab4/tab4.module').then(m => m.Tab4PageModule)
      },
      {
        path: 'tab5',
        loadChildren: () => import('../tab5/tab5.module').then(m => m.Tab5PageModule)
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }

Answer 1

I had a project with something similar and this is how I did it. This is my app-routing:

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

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

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

And then on the tabs module I have the following routing:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ListStoredMoviesComponent } from 'src/app/shared/components/list-stored-movies/list-stored-movies.component';
import { MoviesByCastComponent } from 'src/app/shared/components/movies-by-cast/movies-by-cast.component';

import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'upcoming',
        loadChildren: () => import('./../../pages/upcoming/upcoming.module').then( m => m.UpcomingPageModule)
      },
      {
        path: 'search',
        children: [
          {
            path: '',
            loadChildren: () => import('./../../pages/search/search.module').then( m => m.SearchPageModule)
          },
          {
            path: 'cast',
            component: MoviesByCastComponent
          } 
        ]
      },
      {
        path: 'profile',
        children: [
          {
            path: '',
            loadChildren: () => import('./../../pages/profile/profile.module').then( m => m.ProfilePageModule)
          },
          {
            path: 'lists/details',
            component: ListStoredMoviesComponent
          }
        ]
      }
    ]
  },
  {
    path: '',
    redirectTo: 'tabs/upcoming',
    pathMatch: 'full'
  }
];

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

The second routes file is maybe what you are looking for that's the one taking all the requests. Also all my requests are like localhost:4200/search/XXX too.

When working with tabs all the routing must be held through the tabs. Here's the Ionic's explanation: https://ionicframework.com/docs/angular/navigation#working-with-tabs

Answer 2

Well I am a bit embarassed to say that in the end the reason I was having so much trouble with routing was that I had added some code to navigate to the route of my app in ngOnInit of app.component. Anyway after sorting that out I was then able to get my routing working as desired with tabs using the following combination:

In app-routing.module:

const routes: Routes = [
......
      {
        path: 'displayfile/:navitemid',
        redirectTo: 'tabs/displayfile/:navitemid'
      },
......

Then in routing module of the component that contains the tabs:

const routes: Routes = [
  {
    path: 'tabs',
    component: FileViewerPage,
    children: [
      {
        path: 'displayfile/:navitemid',
        canActivate: [DisplayFileGuardService],
      },
.....

And then finally in my guard some code to identify the parameter, post an appropriate event and then navigate to the correct route:

canActivate(route: ActivatedRouteSnapshot): boolean {
    let navItemId = route.paramMap.get("navitemid");
    if (navItemId) {
      this.events.publishEventDeepLinkingInitiated(navItemId);
      this.router.navigate([""]);

      return false;
    }

    return true;
  }