【问题标题】:Differences Between Angular 5 and Angular 6Angular 5 和 Angular 6 的区别
【发布时间】:2018-11-16 03:34:39
【问题描述】:

Angular 5 和 Angular 6 有什么区别。如何将我们的应用程序从 Angular 5 更新到 Angular 6。

Angular 5 和 Angular 6 的主要区别是什么?

【问题讨论】:

标签: angular angular5 angular6


【解决方案1】:

Angular 6 变化:

1) Typescript 2.7+ 支持

2) 添加了 Angular 材质和 CDK 稳定版

3) 组件开发工具包 (CDK) - CDK 允许您使用 Angular Material 构建自己的 UI 组件库。

4) 改进的装饰器错误消息

5) 修复 Universal 的平台检测示例

6) Ivy Renderer - 这是一个新的向后兼容且主要关注的领域 - 提高了速度、减小了尺寸并增加了灵活性。

7) 添加 afterContentInit 和 afterContentChecked 进行渲染

8) 增加对 nativeElement 的支持

9) 为 ElementRef 添加了可选的泛型类型 该示例看起来像 - @ViewChild('your-element') yourElement:ElementRef;

10) Bazel 编译器 - Bazel 只重建必要的部分。

11) 添加测试注释

12) 为投影组件添加缺少的生命周期测试

13) Closure Compiler - Closure Compiler 始终生成更小的包。

14) 将 QueryPredicate 重命名为 LQuery,将 LQuery 重命名为 LQueries

15) Service Worker - Service Worker 是在 Web 浏览器中运行的脚本。它还管理应用程序的缓存。

16) 为 FormBuilder 的数组方法添加了多个验证器

17) 处理带和不带行边界的字符串 - 现在在模式验证器上处理带和不带行边界 (^ & $) 的字符串。以前,它适用于字符串而不是边界。

18) AbstractControl statusChanges - 以前的版本,当您调用“markAsPending”时不会发出事件,但现在当我们调用 AbstractControl markAsPending 时会发出“PENDING”事件。

19) NgModelChange 更新 - 现在在其控件上更新值和有效性后发出。以前,它是在更新之前发出的。

20) 允许 HttpInterceptors 注入 HttpClient – 以前,尝试直接注入 HttpClient 的拦截器会收到循环依赖错误,因为 HttpClient 是通过注入拦截器实例的工厂构造的。用户希望将 HttpClient 注入到拦截器中进行支持。

无论是 HttpClient 还是用户都必须专门处理循环依赖。此更改将责任转移到 HttpClient 本身。通过利用一个新类 HttpInterceptingHandler 在请求时延迟加载拦截器集,可以将 HttpClient 直接注入拦截器,因为构建 HttpClient 不再需要构造拦截器链。

21) 将 navigationSource 和 restoreState 添加到 NavigationStart - 目前,NavigationStart 无法知道导航是通过命令触发还是通过位置更改触发的。对于各种用例(例如,滚动位置恢复),应以不同方式处理这两个用例。此 PR 添加导航源字段和恢复的导航 ID(传递给由 URL 更改触发的导航)。

22) 为指令 def 添加类型和钩子

23) 启用最小 CLI render3 应用程序的大小跟踪

24) 添加规范视图查询

25) 语言服务——Typescript 的“resolveModuleName”的 2.6 版本开始要求传递的路径用“/”分隔,而不是能够处理“\”。

更多详情:Click Here

【讨论】:

    【解决方案2】:
    1. 您可以将 Angular 5 应用程序更新到 Angular v6, 参考这个网址http://www.talkingdotnet.com/upgrade-angular-5-app-angular-6-visual-studio-2017/

    2. 您还可以看到角度 5 和角度 6 之间的主要变化, https://dzone.com/articles/angular-6-release-vs-angular-5-new-features-and-im

    【讨论】:

      【解决方案3】:

      在 Angular 6 中,默认情况下,此装饰器配置有 "providedIn" 属性,该属性为服务创建提供者。在这种情况下,providedIn: 'root' 指定应该在根注入器中提供服务。

      @Injectable({
          providedIn: 'root'
      })
      export class ApiService{
       //.......}
      

      Further reference at here

      【讨论】:

        【解决方案4】:

        从 Angular 5 到 6 有重大变化,前 10 项变化如下:-

        1. 角元素。
        2. 服务人员支持。
        3. 不支持模板。
        4. i18n
        5. Ivy:新的渲染引擎。
        6. ngModel 更改。
        7. 元素引用
        8. Bazel 编译器。
        9. RxJs 6.0
        10. 摇树。

        详细解释请参考https://dzone.com/articles/top-10-features-of-angular-60

        【讨论】:

          猜你喜欢
          • 2018-09-29
          • 2023-04-08
          • 1970-01-01
          • 1970-01-01
          • 2019-08-28
          • 2019-01-16
          • 2018-10-21
          • 2018-10-18
          • 2023-03-06
          相关资源
          最近更新 更多