现在我们两个都讲了独立的组件而且惰性加载Angular模块,我们可以引入的概念延迟加载独立组件,这在Angular 14之前是不可能的。
从语法的角度来看,唯一的区别是我们使用loadComponent
而不是loadChildren
。在路由配置方面,其他一切保持不变:

现在,延迟加载模块的好处之一是它可以有自己的路由配置一次为不同的路由惰性加载多个组件。
好消息是,我们还可以惰性加载多个独立组件。它所需要的只是创建一个指定的路由文件loadChildren
像这样:

今天要分享的最后一件很酷的事情是:除了上面的语法,Angular现在还支持Typescript中的默认导出loadChildren
而且loadComponent
。
这意味着前面的详细语法:
loadComponent: () => import('./admin/panel.component').then(mod => mod. adminpanelcomponent)},
现在可以变成:
loadComponent: () => import('./admin/panel.component')
如果该组件是其文件中的默认导出,则此方法有效,这意味着类声明看起来像这样:
导出默认类PanelComponent
这同样适用于loadChildren
如果路由数组(或NgModule
)是其文件中的默认导出。你可以看到斯塔克布利茨的例子。