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

杰克奥尼尔

我有一个带有多个模块的 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,而不是 Invalid-Route-Error 我匹配到与ExchangeSelectionComponent上面相同的-route 。此外,当我尝试打开时,http://localhost:4200/thispagedoesnotexist我会ExchangeDetailComponent使用exchange-name = thispagedoesnotexist.

似乎下面的所有内容/exchange/也与基本 root 匹配/

为什么会这样,我该如何避免这种行为?我认为在内部路由中定义的每个路由routeChildren只会在访问相应的父路由时被延迟加载,直到那时甚至没有被触及。

我使用 Angular 5.2。提前感谢您的任何意见。

she7ata

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

path: '', component: ExchangeComponent

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Angular服务,带有路由参数的$ http.get()?

来自分类Dev

带有父参数的Symfony2 FOSRestBundle路由

来自分类Dev

带有嵌套状态的Angular2路由

来自分类Dev

带有路由器出口的Angular2组件通信

来自分类Dev

带有子路由的Angular 2身份验证

来自分类Dev

带有参数的Angular2 DynamicComponentLoader

来自分类Dev

带有子路由器的Angular2路由器不起作用

来自分类Dev

路由angular2时的可选参数

来自分类Dev

带有.htaccess的单独页面上的Angular2 rc路由

来自分类Dev

.otherwise或新Angular2路由器中的/ **以通过通配符路由非路由

来自分类Dev

使用带有路由的ngUpgrade引导Angular 2 rc.6混合应用程序

来自分类Dev

Angular2路由器可以激活,带有参数吗?

来自分类Dev

Angular2-带有参数的路由器导航(RC.4)

来自分类Dev

Zend framework2 +带有参数的路由

来自分类Dev

Angular服务,带有路由参数的$ http.get()?

来自分类Dev

带有子路由器的Angular2路由器不起作用

来自分类Dev

路由angular2时的可选参数

来自分类Dev

带有指令的Angular 2测试组件并获得错误的路由器加载

来自分类Dev

默认路由参数Angular2:嵌套路由

来自分类Dev

.otherwise或新Angular2路由器中的/ **以通过通配符路由非路由

来自分类Dev

Angular 2-带有路由器出口的子路由

来自分类Dev

Angular2路由配置(带有两个参数的路由)

来自分类Dev

混合AngularJS和Angular 2路由时的通配符路径

来自分类Dev

参数未定义的 Angular 2 路由

来自分类Dev

带有路由参数的 angular 2 routerLink 仅用作字符串

来自分类Dev

路由中的 Angular 2 传递参数

来自分类Dev

带有附加 url 的 angular2 路由参数

来自分类Dev

Angular 5 - 使用通配符路由

来自分类Dev

参数中带有完整 URL 的 Rails 通配符路由

Related 相关文章

  1. 1

    Angular服务,带有路由参数的$ http.get()?

  2. 2

    带有父参数的Symfony2 FOSRestBundle路由

  3. 3

    带有嵌套状态的Angular2路由

  4. 4

    带有路由器出口的Angular2组件通信

  5. 5

    带有子路由的Angular 2身份验证

  6. 6

    带有参数的Angular2 DynamicComponentLoader

  7. 7

    带有子路由器的Angular2路由器不起作用

  8. 8

    路由angular2时的可选参数

  9. 9

    带有.htaccess的单独页面上的Angular2 rc路由

  10. 10

    .otherwise或新Angular2路由器中的/ **以通过通配符路由非路由

  11. 11

    使用带有路由的ngUpgrade引导Angular 2 rc.6混合应用程序

  12. 12

    Angular2路由器可以激活,带有参数吗?

  13. 13

    Angular2-带有参数的路由器导航(RC.4)

  14. 14

    Zend framework2 +带有参数的路由

  15. 15

    Angular服务,带有路由参数的$ http.get()?

  16. 16

    带有子路由器的Angular2路由器不起作用

  17. 17

    路由angular2时的可选参数

  18. 18

    带有指令的Angular 2测试组件并获得错误的路由器加载

  19. 19

    默认路由参数Angular2:嵌套路由

  20. 20

    .otherwise或新Angular2路由器中的/ **以通过通配符路由非路由

  21. 21

    Angular 2-带有路由器出口的子路由

  22. 22

    Angular2路由配置(带有两个参数的路由)

  23. 23

    混合AngularJS和Angular 2路由时的通配符路径

  24. 24

    参数未定义的 Angular 2 路由

  25. 25

    带有路由参数的 angular 2 routerLink 仅用作字符串

  26. 26

    路由中的 Angular 2 传递参数

  27. 27

    带有附加 url 的 angular2 路由参数

  28. 28

    Angular 5 - 使用通配符路由

  29. 29

    参数中带有完整 URL 的 Rails 通配符路由

热门标签

归档