具有多个组件的延迟加载功能模块在角度6中不起作用

发布时间：2020-12-17 17:11:53 所属栏目：安全来源：网络整理

导读：我有一个带客户路由模块的客户模块： const routes: Routes = [ { path: '',component: CustomerComponent,children: [ { path: 'edit',component: EditCustomerComponent } ] }]; 这是我的app-routing模块： const routes: Routes = [ { path: 'customers/:

我有一个带客户路由模块的客户模块：

const routes: Routes = [
  {
    path: '',component: CustomerComponent,children: [
      { path: 'edit',component: EditCustomerComponent }
    ]
  }
];

这是我的app-routing模块：

const routes: Routes = [
  { path: 'customers/:id',loadChildren: './customer/customer.module#CustomerModule' },{ path: 'login',component: LoginComponent}
];

但是,当我按照这样的路径进行客户/ 3 /编辑时,它始终显示CustomerComponent而不是EditCustomerComponent.

也许懒加载不起作用？

PS：我使用角度6.1.0

更新：我的客户模块

import {ReactiveFormsModule} from '@angular/forms';
import {CustomerComponent} from './customer.component';
import {EditCustomerComponent} from './edit-customer.component';

@NgModule({
  imports: [
    CommonModule,CustomerRoutingModule,ReactiveFormsModule
  ],declarations: [CustomerComponent,EditCustomerComponent]
})
export class CustomerModule { }

解决方法

您不必在子项下放置编辑路径.您的客户路由模块将如下所示：

const routes: Routes = [
  { path: '',component: CustomerComponent },{ path: 'edit',component: EditCustomerComponent }
];

还要确保在客户路由模块中使用forChild函数检查是否已导入此路由数组,如下所示：

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

希望这可以解决您的路由问题.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!