带有标签的离子角路由

Question

我在 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),
  }
];

像“http://localhost:8100/displayfile/1234”这样的 URL 应该匹配第一个路由。在我重构我的应用程序以引入选项卡式界面之前，它就是这样做的。但它似乎忽略了这条路线。

我的 file-viewer-routing.module 包含下面的选项卡。我已经阅读了文档并尝试了许多不同的组合但没有成功。我已经登录了“DisplayFileGuardService”构造函数和 canActivate 方法。所以我知道它没有被击中。如果我将该守卫添加到最后一条路线，那么它确实会被上面失败的 URL 击中。为什么它会掉到空路由并忽略我的显示文件路由？

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

好吧，我有点尴尬地说，最后我在路由方面遇到这么多麻烦的原因是我在 app.component 的 ngOnInit 中添加了一些代码来导航到我的应用程序的路由。无论如何，在整理出来之后，我就可以使用以下组合让我的路由根据需要使用选项卡：

在 app-routing.module 中：

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

然后在包含选项卡的组件的路由模块中：

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

最后在我的保护下，一些代码来识别参数，发布一个适当的事件，然后导航到正确的路线：

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

      return false;
    }

    return true;
  }

Answer 2

我有一个类似的项目，我就是这样做的。这是我的应用程序路由：

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 { }

然后在标签模块上我有以下路由：

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 {}

第二个路由文件可能是您正在寻找的那个接受所有请求的文件。我所有的请求也都像 localhost:4200/search/XXX 一样。

使用选项卡时，所有路由都必须通过选项卡进行。这是 Ionic 的解释：https://ionicframework.com/docs/angular/navigation#working-with-tabs