Question

我有一个angular 8应用程序，每个功能模块都包含一个* -routing.module.ts文件，其中包含到各个组件的路由。

目前，我有2个功能模块，一个称为“任务”，一个称为“客户端”。

两者的设置方法相同。这是我的 app.routing.ts ：

// Task Pages
{ path: 'tasks', loadChildren: './tasks/tasks.module#TasksModule' },

// Client Pages
{ path: 'clients', loadChildren: './clients/clients.module#ClientModule' },

现在，由于某些原因，这两个模块的行为异常。在 clients-routing.module.ts 中，我在路由前面加上“ clients”：

  const routes: Routes = [
    { path: 'clients', component: ClientListComponent, canActivate: [AuthGuard] },
    { path: 'clients/new', component: ClientCreateComponent, canActivate: [AuthGuard]},
    { path: 'clients/:id', component: ClientDetailComponent, canActivate: [AuthGuard]},
    { path: 'clients/:id/edit', component: ClientEditComponent, canActivate: [AuthGuard]},
];

一切正常。导航到http://baseurl/clients会列出所有客户端，导航到http://baseurl/clients/1会导航到正确的客户端详细信息，依此类推。

但是，对于 tasks-routing.module.ts ，如果我像在客户文件中那样包含前置的任务，则它不起作用，所有路由均未按预期运行，而是，我需要这样做：

    const routes: Routes = [
    { path: '', component: TaskListComponent, canActivate: [AuthGuard] },
    { path: 'new', component: TaskCreateComponent, canActivate: [AuthGuard] },
    { path: ':id', component: TaskDetailComponent, canActivate: [AuthGuard] },
];

这时，预期的路由会起作用，例如http://baseurl/tasks列出所有任务，http://baseurl/tasks/23显示任务23的详细信息，依此类推。

为什么它们不同？我似乎看不出两个模块的路由会有所不同的任何原因。

Answer 1

这看起来像在注册路由时使用RouterModule.forRoot()和RouterModule.forChild()之间的区别。

我怀疑您的客户路由使用forRoot方法，而任务使用forChild方法，因此有所不同。

角度样式指南建议：

仅在根AppRoutingModule（或AppModule，如果您在其中注册顶级应用程序路由）中调用RouterModule.forRoot（）。在任何其他模块中，必须调用RouterModule.forChild方法来注册其他路由。

https://angular.io/guide/router

Angular 8-延迟加载-奇怪的子路径行为

1 个答案: