Question

我有一个延迟加载组件和参数的问题。我有两个模块：一个带有仪表板组件（DashboardComponent）的仪表板模块（DashboardModule）和另一个名为user（UserModule）的模块，其中一个组件（UserComponent）用于示例。 UserComponent用于显示一个用户或创建新用户。我想懒加载模块UserModule。所以我在app.routing.ts文件中的配置是：

export const appRoutes: Routes =  [
    { path: '',   redirectTo: '/dashboard', pathMatch: 'full' },
    { path: '**', redirectTo: '/dashboard', pathMatch: 'full' },
    { path: 'user', loadChildren: 'app/user/user.module#UserModule' },
]

@NgModule({
  imports: [ RouterModule.forRoot(appRoutes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

现在，在我的模块User中，我有一个文件来配置我的路由：user.routing.ts。我想为我的两种情况设置相同的路径：如果路由中有id，则显示一个用户;如果id为空，则创建用户。所以我试试这个，但它不起作用：

const userRoutes: Routes = [
    { path: '', component: UserComponent },
    { path: ':id', component: UserComponent } // This line does not work
];

@NgModule({
    imports: [RouterModule.forChild(userRoutes)],
    exports: [RouterModule]
})
export class UserRoutingModule { }

如果我的路线有Id，则无法正常工作，并自动将路线返回给用户。例如：locahost：4200 / user / 123不起作用，并且有重定向到localhost：4200 / user

我没有找到这种情况的样本，所以我希望有人会帮助我。

谢谢。

Answer 1

路线的顺序很重要。路由器将尝试匹配从上到下的路由。 “ **”路由将匹配任何内容，因此路由器将在目标用户路由之前匹配仪表板

Answer 2

你应该删除

{ path: '**', redirectTo: '/dashboard', pathMatch: 'full' },

从 appRoutes

设置

Angular 2 Routing Lazy Loading - 路由中的参数

2 个答案: