关于angular:动态懒加载组件解决方案

这是什么

  • 失常的应用,是先申明组件,而后在模板中引入组件,这就导致了一个问题,如果一个组件的应用次数非常少,那么这个模块依然会把组件打包进去,使得模块增大
  • 本我的项目先将组件当做失常标签写入,而后应用两个装璜器,一个为结构化懒加载指令,一个为自定义表单控件指令用来帮助加载

须要前置常识

  • 结构型指令
  • 属性型指令
  • 自定义表白控件
  • ngModel实现原理

实用版本

  • ng10(100%)
  • ng9(靠近100%)

ng9和ng10没太大改变,所以ng9应该没什么问题

  • ng8(如果不能够须要依赖路由实现)
  • ng7以下(须要依赖路由实现)

与8的路由实现形式不同,然而总体是依赖路由实现的

成果

  • 靠近失常的开发只不过须要多个指令反对
  • 只在应用时,会动静申请相干组件
  • input完全相同
  • output 会变成CustomEvent类型,值再detail属性中
  • 表单控件在逻辑上应该齐全一样

思路

  • 通过动静加载并创立的web-component元素,实质上与一般标签齐全一样
  • 所以说他就是个元素,无奈响应双向绑定,须要通过指令来代替

input,select等类型都是通过指令实现的双向绑定,这也是本次组件的实现思路

  • 通过指令的直达,在须要懒加载的组件中退出一个事件,在初始化时发射事件,值为这个组件的实例,通过拿到实例,将自定义表白控件相干的实现办法手动设置逻辑

代码地址

地址

本文由乐趣区整理发布,转载请注明出处,谢谢。

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据