【发布时间】:2019-12-15 01:36:22
【问题描述】:
在我的主页上,我有 4 个指向组件的链接,它们都属于一个名为“CrudModule”的功能模块。
我想知道如何延迟加载这个模块,这似乎不起作用:
我的 app-routing.module.ts:
const routes: Routes = [
{ path: 'add', loadChildren: () => import(`./crudFeatureModule/crud.module`).then(x => x.CrudModule) }
, { path: 'search', loadChildren: () => import(`./crudFeatureModule/crud.module`).then(x => x.CrudModule) }
, { path: 'importer', loadChildren: () => import(`./crudFeatureModule/crud.module`).then(x => x.CrudModule) }
, { path: 'publier', loadChildren: () => import(`./crudFeatureModule/crud.module`).then(x => x.CrudModule) }
];
在官方 Angular 文档中,每个模块只提到了一个组件,请参阅
这个例子来自https://angular.io/guide/lazy-loading-ngmodules:
app-routing.module.ts:
const routes: Routes = [
{
path: 'customers',
loadChildren: () => import('./customers/customers.module').then(mod => mod.CustomersModule)
},
customers-routing.module.ts:
import { CustomerListComponent } from './customer-list/customer-list.component';
const routes: Routes = [
{
path: '',
component: CustomerListComponent
}
];
上述路径设置为空字符串。这是因为 AppRoutingModule 中的路径已设置为“客户”。
问题:鉴于延迟加载模块的路径总是需要为空,这是否意味着我应该将所有组件放在不同的模块中以实现延迟加载?换句话说,延迟加载的模块可以处理多个路由吗? 如果是这样,我应该怎么做?
【问题讨论】:
-
当你说它不起作用时,究竟发生了什么?一般来说,您会有一个延迟加载子模块的父路由,并且该子模块将有自己的内部路由。您可以在一个模块中拥有任意数量的组件。
-
这个问题好像不太清楚,能不能说的具体点
-
它不起作用,因为我的功能模块只识别空路径:用户点击的路径。我的意思是延迟加载的模块只能有一个路径,它应该始终为空?
-
您可以将
path: ''用于所有延迟加载的模块,然后在子路由中设置额外的路由,例如search -
@OleEHDufour 这里是一个简单路由的示例 Angular 应用程序(虽然不是延迟加载),可以帮助您了解您的问题:github.com/JOELJOSEPHCHALAKUDY/angular-github-user-info-demo/…
标签: angular routes lazy-loading