Question

我对Angular路由很陌生，找不到这种情况的解决方案。我有一个Login组件和一个User模块。 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)
]

这是一个堆叠闪电战：https://stackblitz.com/edit/ng-stackoverflow-52391592

Answer 2

Your user.module is also working. but it will work if your URL have like this : https:\\www.google.com\2

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

and below code work with https:\\www.google.com\user\2.

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

In the second code of your user.module, You had not define any component just define its childs. So when your run your child component it will run as sibling not as children component.

Because If you want to run children component inside parent component that you must need to define more <router-outlet> inside your parent component.

The angular give default <router-outlet> inside app.component.html when you create application.

Here is the working Stackblitz with parent-child and with params. That you can modify as per your requirement.

Answer 3

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

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

“ jam.com/：用户名”会导致任何“ jam.com/xxxxxx”成为UserBaseComponent的有效参数-其中包括“ jam.com/login”。

您已经解决了它-通过在参数之前创建静态路径来将其与/ login明确区分开来。

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

3 个答案: