javascript - Angular 2+ |如何在 NgModule 中使用参数定义路由

Question

我对 Angular 路由很陌生，找不到针对这种情况的任何解决方案。我有一个登录组件和一个用户模块。有一个<router-outlet>在 App 组件中，一个在 User 模块中的 UserBase 组件中。这是我的路由声明。

应用程序模块.ts

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
];

imports: [
    RouterModule.forRoot(routes),
    UserModule,
],

用户.module.ts

const routes: Routes = [
  {
    path: ':username',
    component: UserBaseComponent,
    children: [
      {
        path: '',
        component: UserDetailsComponent,
      },
      {
        path: 'progress',
        component: ProgressComponent,
      },
      {
        path: 'timeline',
        component: TimelineComponent,
      },
      {
        path: 'leaderboard',
        component: LeaderboardComponent,
      }
    ],
  }
];

imports: [
    RouterModule.forChild(routes)
]

它可以很好地处理用户模块的路径，但它始终将“登录”识别为用户名，而不是导航到登录组件。实际上，如果我像这样在参数之前添加一个静态路径，它就可以正常工作。

{
  path: 'user',
  children: [
    {
      path: ':username',
      component: UserBaseComponent,
      children: [
        {
          path: '',
          component: UserDetailsComponent,
        },
        {
          path: 'progress',
          component: ProgressComponent,
        },
        {
          path: 'timeline',
          component: TimelineComponent,
        },
        {
          path: 'leaderboard',
          component: LeaderboardComponent,
        }
      ],
    }
  ]
}

谁能解释一下为什么？

Answer 1

当您在主模块中导入具有自己路由的模块时，子模块的路由将放置在主路由之前。

所以当您导入 UserModule 时，您的路由看起来像这样。

- :username
    - /
    - progress

- login

当读取路由时，它从顶部开始，所以首先读取 :username。该路由匹配所有内容，因此不会访问其他路由。

您可以尝试延迟加载您的用户模块，这样您就可以控制路由的顺序。请注意，您不再将 UserModule 声明为导入。

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: '',
    loadChildren: '<PATH_TO_MODULE>/user.module#UserModule'
  },
];

imports: [
    RouterModule.forRoot(routes)
]

这是一个 Stackblitz:https://stackblitz.com/edit/ng-stackoverflow-52391592