这是什么
- 正常的使用,是先声明组件,然后在模板中引入组件,这就导致了一个问题,如果一个组件的使用次数非常少,那么这个模块仍然会把组件打包进去,使得模块增大
- 本项目先将组件当做正常标签写入,然后使用两个装饰器,一个为结构化懒加载指令,一个为自定义表单控件指令用来协助加载
需要前置知识
适用版本
- ng8(如果不可以需要依赖路由实现)
- ng7以下(需要依赖路由实现)
效果
- 接近正常的开发只不过需要多个指令支持
- 只在使用时,会动态请求相关组件
- input完全相同
- output 会变成
CustomEvent
类型,值再detail
属性中 - 表单控件在逻辑上应该完全一样
思路
- 通过动态加载并创建的
web-component
元素,本质上与普通标签完全一样 - 所以说他就是个元素,无法响应双向绑定,需要通过指令来代替
- 通过指令的中转,在需要懒加载的组件中加入一个事件(componentIsLoaded),在初始化时发射事件,值为这个组件的实例(this),通过拿到实例,将自定义表达控件相关的实现方法手动设置逻辑
代码地址
直接使用
- 安装
cyia-ngx-common
- 具体用例可以在这里查看
@NgModule({
imports: [
LazyLoadModule.forRoot([
[
'libwc',//lazyLoad结构型指令请求加载时传入的健名
(injector, compiler) =>
import('libwc').then((e) =>//准备加载哪个模块,这里是通过tsconfig指定的路径映射,也可以直接使用相对路径
createWebComponent(//创建web-component组件,封装的便捷方法,module需要有属性entry赋值为需要创建的组件
injector,
compiler,
e.LibwcModule,
'custom-libwc'// 页面上要写标签名
)
),
],
]),
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],//自定义元素
})
export class AppModule {}
<!-- 这里使用的是非显示指令实现的的,可查看lazy-form.directive.ts文件 -->
<custom-libwc *lazyLoad="'libwc'" formControlName="lazy"></custom-libwc>
<!-- 和上面的等同,为显示指令,引入模块自带 -->
<custom-libwc *lazyLoad="'libwc'" lazyLoadFormControl formControlName="lazy"></custom-libwc>