NavMenuComponent组件的角延迟加载实现

问题描述

我已经按照官方Lazy-loading feature module页上的方法在项目中实现了延迟加载功能。但是，我还不知道如何处理不会被定向为NavMenuComponent，Sidebar等的模块或组件。另一方面，应该为HomeComponent设置path: '',还是为Home创建新路线？

以下是我混淆的几点：

1。。我认为我不需要像为其他路线创建的那样创建navmenu-routing.module.ts和navmenu.module.ts。是真的吗？

2。。在app.module中，我定义了NavMenuComponent，如下所示。但是我不确定是否应该将NavMenuComponent移到声明字段？

@NgModule({
  declarations: [
    AppComponent
  ],imports: [
    browserModule,FormsModule,HttpClientModule,AppRoutingModule,NavMenuComponent
  ],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

3。。在app-routimg.module中，我不使用NavMenuComponent。正确吗？

import { NgModule } from '@angular/core';
import { Routes,RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'customers',loadChildren: () => import('./counter/customer.module').then(m => m.CustomerModule)
  },{
    path: 'orders',loadChildren: () => import('./order/order.module').then(m => m.OrderModule)
  },{
    path: '',redirectTo: '',pathMatch: 'full'
  }
];

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

是否有任何错误或应检查的内容？

解决方法

这个问题还不太清楚，但是我感觉到您正在尝试使路由延迟加载有效

1. 您的应用模块和路由模块看起来正确

2. 现在在订单模块中，您将拥有一个order-routing.module.ts文件，您可以在其中定义路径，例如

  const routes: Routes = [
      {path:'list',component: ListOrdersComponent}
    ];

1. 现在在您的导航组件中，您可以调用路由/ order / list，它将在路由器出口中显示ListOrdersComponent。