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

Question

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

app.module.ts

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

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

user.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

Answer 2

您的user.module 也可以使用。但如果您的网址是这样的，它会起作用：https:\\www.google.com\2

path: ':username',
component: UserBaseComponent,
children: [
     {
        path: '',
        component: UserDetailsComponent,
      },
]

以下代码与https:\\www.google.com\user\2一起使用。

path: 'user',
children: [
    {
      path: ':username',
      component: UserBaseComponent,
      children: [
          {
            path: '',
            component: UserDetailsComponent,
          },
     }
]

在 user.module 的第二个代码中，您没有定义任何组件，只是定义了它的子组件。因此，当您运行您的子组件时，它将作为 sibling 而不是 children 组件运行。

因为如果要在父组件内运行子组件，则必须在父组件内定义更多<router-outlet>。

创建应用程序时，app.component.html 内的角度默认为<router-outlet>。

这是带有父子和参数的工作Stackblitz。您可以根据需要进行修改。

Answer 3

当您将您的用户名路径声明为“:username”时，它会将根 url 中的任何给定字符串作为您的 UserBaseComponent 的有效参数。这就是您的“登录”字符串被定向到 UserBaseComponent 的原因。

例如，您的网址是：'jam.com'。

'jam.com/:username' 使任何 'jam.com/xxxxxx' 成为 UserBaseComponent 的有效参数 - 包括 'jam.com/login'。

您已经解决了这个问题 - 通过在参数之前创建一个静态路径来明确区分它与 /login。