angular oracle,Angular中,模块加载的几种方法

一、懒加载

通过路由配置:

{

path: 'flight-booking',

loadChildren: './flight-booking/flight-booking.module#FlightBookingModule'

}

好处:这种方式有利于初始减少加载体积 , 不需要在app.module.ts中,主动去引入相应的模块(它们自然不会打包到AppModule中去)。

依赖:主项目必须包含各子模块的源码!

二、动态(懒)加载

参照:angular-elements-dashboard  项目。

在anuglar.json中,配置懒加载的模块路径:

52db0687d8b44d52052e54640f1fc7d3.png

之后,在被动态加载的模块中,用public属性ComponentList,从模块对象上暴露出来所有的组件类。增加它主要是由于动态加载后,不方便从NgModuleRef 的变量上,找到这个当前模块中,到底有哪些组件类,故明确引出。

8abc9e49ebf0f342278d6380c824318d.png

动态模块准备好了,那接下来要通过 NgModuleFactoryLoader 类开加载它,并且把当前的root模块的injector注入到新模块中去。

0b62a145e581bef776ce608ac2aa4bdd.png

现在动态模块已经加载到主的AppModule中来了,如果要动态添加动态模块内的组件,就和普通的动态添加组件的技术一致了:  用ViewContainerRef 的一个变量来创建一个组件createComponent,  并插入到指定位置。

785be9a9acfb20449e34d54a46736c5b.png

同懒加载一样:

好处:这种方式有利于初始减少加载体积 , 不需要在app.module.ts中,主动去引入相应的模块(它们自然不会打包到AppModule中去)。

依赖:主项目必须包含各子模块的源码!

三、发布一个Library

从Anuglar6开始,一个工程支持多个项目/库。这里,每一个库相当于一个模块包,它通常包含一个Module,多个Service,Component组件等等。然后它可以构建为APF(Angular Package Formattor)格式的包,发布到npm 供别人使用,也可以在当前项目中被引用。有点类似.Net里的引用库 或 Java中的jar包的感觉。

ng generate library my-lib

ng build my-lib --prod

cd dist/my-lib

npm publish

0336aec76747c3d91edb859aba3417e7.png

一行代码未写,就构建了一个组件,Angular还是很强大的。

我们再加一行代码引用这个myLib模块:

0c1d2a9221a875bcdd27d02482f23f6e.png

8cbea14cc57fdfed431ebaeb40d30ff3.png

通过结果,可以看到它们是打包到一个文件中的。这是由于在Angular中,模块只是逻辑代码隔离的概念, 并非是打包文件的隔离!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值