ng9新特性 lvy出场

  • A+
所属分类:Web前端
摘要

原文需要翻墙
lvy带来的优势Smaller bundle sizesFaster testingBetter debuggingImproved CSS class and style binding

原文需要翻墙
lvy带来的优势

  • Smaller bundle sizes

    • 无用的代码会被tree-shaking掉;为每个组件生成更少的代码
  • Faster testing

    • 测试速度提升,lvy不会重新编译所有组件除非被手动覆盖
  • Better debugging

    • 在控制台使用ng可以拿到组件(ng.getComponent(document.getElementsByTagName('组件tag名字')[0])),指令等的实例
    • 然后可以手动调用组件的方法,更新组件状态
    • ng.applyChanges可以手动触发变更检测
    • 改善错误栈追踪
  • Improved CSS class and style binding

    • 优化样式绑定

    • 比如

    • <my-component style="color:red;" [style.color]="myColor" [style]="{color: myOtherColor}" myDirective>

    • 之前 样式优先级取决于 绑定的时间 ,也就是最后一个绑定会覆盖之前的绑定

    • lvy 样式优先级 和时间无关,越具体的绑定优先级越高,比如 [style.color]会覆盖[style]

    • [ngStyle]and[ngClass]的绑定行为被保留

    • 样式绑定代码重构的副作用,可以在模版中绑定c s s变量

    • <div [style.--main-border-color]=" '#CCC' ">   <p style="border: 1px solid var(--main-border-color)">hi</p> </div>  

      c s s变量以 -- 开头

  • Improved type checking

    • 完善了类型检查
    • 增加了两种而外的类型检查机制
    • fullTemplateTypeCheck: 检查模版里的所有变量
    • strictTemplates: 使用最严格的类型检查
  • Improved build errors

    • 使错误信息可读性更强
  • Improved build times, enabling AOT on by default

  • Improved Internationalization

    语言服务的启动时间快10倍

  • @Injectable({providedIn: })

    • providedIn除了原来的 ‘root’和模块名字还有两个选项
    • any 为每个子注入器注入隔离的服务,非单例
    • platform 提供多个应用共享的服务
  • component harnesses

  • YouTube and Google Maps

  • Visual Studio 的angular 语法支持扩展: Angular Language Service

  • 支持TypeScript 3.7