Angular 2 条带参数的路由充当通配符路由

Question

我有一个包含多个模块的 angular 应用程序，每个模块都定义了一些路由。

应用程序（基本模块）使用此 AppRoutingModule：

const routes: Routes = [
  {path: 'user', loadChildren: 'app/user/user.module#UserModule'},
  {path: 'exchange', loadChildren: 'app/exchange/exchange.module#ExchangeModule'},
  {path: 'home', component: HomeComponent},
  {path: '', redirectTo: '/home', pathMatch: 'full'},
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

用户模块路由器：

@NgModule({
  imports: [RouterModule.forChild(
    [{
      path: '', component: UserComponent,
      children: [
        {path: '', component: UserProfileComponent, canActivate: [AuthGuardService]},
        {path: 'login', component: UserLoginComponent},
        {path: 'register', component: UserRegisterComponent},
        {path: 'confirm/:confirmcode', component: UserConfirmMailComponent},
        {path: 'logout', component: UserLogoutComponent}
      ]
    }]
  )],
  exports: [RouterModule]
})
export class UserRoutingModule {
}

交换模块路由器：

@NgModule({
  imports: [RouterModule.forChild(
    [{
      path: '', component: ExchangeComponent,
      children: [
        {path: '', component: ExchangeListComponent},
        {path: ':exchange-name', component: ExchangeDetailComponent},
        {path: ':exchange-name/:baseCode', component: ExchangeSelectionComponent},
        {path: ':exchange-name/:baseCode/:targetCode', component: ExchangePairComponent},
      ]
    }]
  )],
  exports: [RouterModule]
})
export class ExchangeRoutingModule {
}

我现在可以按预期使用路由 http://localhost:4200/exchange/Sample/Base 访问 ExchangeSelectionComponent 组件。

但是当我导航到 http://localhost:4200/user/confirm/ 时不小心错过了添加所需的参数 confirmcode，而不是无效路由错误，我匹配到相同的 ExchangeSelectionComponent-路由如上。另外，当我尝试打开 http://localhost:4200/thispagedoesnotexist 时，我会使用 exchange-name = thispagedoesnotexist.

进入 ExchangeDetailComponent

似乎 /exchange/ 下面的所有内容也与基根 / 相匹配。

为什么会这样，我该如何避免这种行为？我认为在 routeChildren 内的路由中定义的每条路由只会在访问相应的父路由时被延迟加载，直到那时才被触及。

我用的是Angular 5.2。在此先感谢您的任何输入。

Answer 1

我猜测 ExchangeModule 是在 app.module 中导入的，因此正在解析它的路由定义而不是延迟加载的。

path: '', component: ExchangeComponent

确保模块是延迟加载的，而不是在 app.module 中导入的，这可以通过快速检查 app.module 文件或检查网络选项卡并在您时查找新加载的块来确认访问一个应该延迟加载的路由，如果没有加载新的块，那么你的模块已经在 app.module 中导入并且没有延迟加载。

Angular 2 条带参数的路由充当通配符路由

Angular 2 route with parameter acts as wildcard route

angular-routing

angular