惰性加载独立组件

现在我们两个都讲了独立的组件而且惰性加载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)是其文件中的默认导出。你可以看到斯塔克布利茨的例子

betway必威滚球

Alain是谷歌开发专家,擅长Web技术、Angular和谷歌地图。他的日常任务是帮助开发团队采用Angular,并使用该框架进行大规模构建。他在六大洲都教授过Angular !阿兰是一名世界旅行家和摄影师,也是国际会议的演讲者,并出版了几门视频课程。