Angular NavMenuComponent 组件的延迟加载实现
Angular lazy-loading implementation for NavMenuComponent component
我按照官方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 { }
是否有任何错误或需要检查的内容?
不是很清楚这个问题,但我感觉你正在尝试让路由延迟加载工作
您的应用模块和路由模块看起来是正确的
现在在订单模块中,您将有一个 order-routing.module.ts 文件,您可以在其中定义路径,例如
const routes: Routes = [
{path:'list', component: ListOrdersComponent}
];
- 现在在您的导航组件中,您可以调用路由 /order/list,它将在 router-outlet.
中显示 ListOrdersComponent
我按照官方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 { }
是否有任何错误或需要检查的内容?
不是很清楚这个问题,但我感觉你正在尝试让路由延迟加载工作
您的应用模块和路由模块看起来是正确的
现在在订单模块中,您将有一个 order-routing.module.ts 文件,您可以在其中定义路径,例如
const routes: Routes = [ {path:'list', component: ListOrdersComponent} ];
- 现在在您的导航组件中,您可以调用路由 /order/list,它将在 router-outlet. 中显示 ListOrdersComponent