Angular 6的新特性介绍

缺乏、安全感 2022-05-15 07:47 239阅读 0赞

原文：https://www.cnblogs.com/xzsty/p/9072071.html

2018年5月4日，Angular6.0.0版正式发布，新版本主要关注底层框架和工具链，目的在于使其变得更小更快。下面就介绍下新版本的一些主要新特性，供大家参考。

# ng update #

ng update 是新增的一个cli命令。通过ng update不仅可以保持正确的版本依赖，而且能保持依赖关系的同步。第三方可以使用原理图提供更新脚本。如果您的某个依赖项提供了一个ng update原理图，那么他们可以在需要进行重大更改时自动更新代码！

# ng add #

ng add 也是新增的一个cli命令。通过ng add可以更加容易向项目中添加新功能（类似npm install ）

# Angular Material+CDK组件 #

angular6最大的补充是用于显示分层数据的新树组件。遵循数据表组件的模式，CDK包含核心树指令，而Angular Material则提供与顶层的Material Design样式相同的体验

## Material ##

运行命令，添加Material

ng add @angular/material

![993712-20180522145805927-676541041.gif][]  
一旦添加Material之后，你就可以生成三个新的入门组件

### Material Sidenav ###

运行命令：

ng generate @angular/material:material-nav --name=my-nav //生成一个nav组件

![993712-20180522145840921-959736309.png][]

### Material Dashboard ###

运行命令：

ng generate @angular/material:material-dashboard --name=my-dashboard

![993712-20180522145859258-225244839.png][]

### Material Data Table ###

运行命令：

ng generate @angular/material:material-table --name=my-table

![993712-20180522145915924-202846553.png][]  
如果要了解更多有关Material的信息，[请点击这里][Link 1]

# CLI工作空间 #

CLI6.0版本现在支持包含多个项目的工作空间，如多个应用程序或库。CLI项目现在将使用angular.json而不是 .angular-cli.json用于构建和项目配置。  
![993712-20180522145947193-798086170.jpg][][点击查看更多配置说明][Link 2]

# 库的支持 #

CLI最需要的功能之一是支持创建和构建库

ng generate library <name>

该命令将在CLI工作区内创建一个库项目，并对其进行配置以进行测试和构建。

ng generate library <name>

这个命令将在你的CKI工作空间创建一个库项目，并且自动添加配置信息到angular.json文件和tsconfig.json中。  
[点击][Link 3]查看更多关于CLI工作空间的信息

# Providers的改变 #

为了使我们的程序变得轻量，Angular6将模块引入服务的模式，改成服务引入模块的模式。

##### 6.0之前的版本服务注入 #####

// app.module.ts
    @NgModule({
      ...
      providers: [MyService]
    })
    export class AppModule {}
    
    //my-service.ts
    import { Injectable } from '@angular/core';
    
    @Injectable()
    export class MyService {
      constructor() { }
    }

##### 6.0之后的版本服务注入 #####

NgModule中不再需要引入

//my-service.ts
    
    import { Injectable } from '@angular/core';
    
    @Injectable({
      providedIn: 'root',
    })
    export class MyService {
      constructor() { }
    }

# Animations性能优化 #

新的Animations实现，不再需要 web animations polyfill。这也就意味着你可以从你的应用中移除 polyfill，这样可以减少大约47k的空间

# RxJS v6 #

Angular已经更新使用了RxJS v6。RxJS作为一个独立的工程已经在几周前完成了V6的发布

# 长期支持 (LTS) #

我们正在将我们的长期支持扩展到所有主要版本。

之前我们宣布只有v4和v6是LTS版本，但为了从一个主要版本更新到下一个主要版本更容易，并给更大的项目更多时间来规划更新，我们决定将延长对所有主要版本的长期支持从v4开始。

每个主要版本将支持18个月，大约6个月的积极开发，接下来是12个月的关键错误修正和安全补丁。

# 如何升级到6.0.0 #

[按照引导对应用进行升级][Link 4]  
![993712-20180522145711702-901845605.png][]  
更新通常遵循3个步骤，并将利用新ng update工具。

1.  更新@ angular / cli
2.  更新你的Angular框架包
3.  更新其他依赖项

# Ivy #

Ivy将会是下一代渲染引擎，现在正在开发中。让我们拭目以待吧。  
[原文链接][Link 5]

[993712-20180522145805927-676541041.gif]: /images/20220515/856d18d87926469ca9a2d173943a03f8.png
[993712-20180522145840921-959736309.png]: /images/20220515/c7f0d3ac758f44c2863eaa39742e250a.png
[993712-20180522145859258-225244839.png]: /images/20220515/6e434234e5824449bc33369fbd747ee6.png
[993712-20180522145915924-202846553.png]: /images/20220515/35c43f1f8ce84d1faca794472db188c2.png
[Link 1]: https://material.angular.io/guide/schematics
[993712-20180522145947193-798086170.jpg]: /images/20220515/9d8b0aa1848244b18c2c79c93a4d0bb7.png
[Link 2]: https://github.com/angular/angular-cli/wiki/angular-workspace
[Link 3]: https://github.com/angular/angular-cli/wiki/stories-create-library
[Link 4]: https://update.angular.io/
[993712-20180522145711702-901845605.png]: /images/20220515/c6d480e9e054479c8e9602dbefc8a780.png
[Link 5]: https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4