angular4输入有效性_[译]Angular 5：升级和新功能的总结

代号为pentagonal-donut的Angular 5刚刚发布，它带来了一些新功能以及一些内部变化，这些会让Angular应用变得更小，执行变得更快。 在这篇文章中，我们将简要介绍一些最重要的变化以及升级指南。 有关更多详细信息，请参阅公告博客帖子，有关所有更改的详细信息，请参阅官方更新日志。

性能

这是Angular 5包含的一些改变，它会让你的应用变得更小更快：Angular CLI v1.5也是今天发布的，它有一个默认启用的构建优化器。 构建优化器在构建时会执行一系列额外的优化，包括更好的tree shaking。为了加快构建和重构建，Angular编译器也进行了改进。 它现在在引擎下使用TypeScript转换。ng serve命令使用--aot标记让 AOT(Ahead of time)和增量构建在开发时成为了可能。 这应该成为未来CLI版本的默认值。intl和Reflect polyfills不再需要，这有助于缩小程序包。 请注意，在JIT模式下仍然需要Reflect polyfills。有一个新的选项，preserveWhitespaces，从模板代码中删除非重要的空白字符，这可以进一步减少你的应用程序的最终包的大小。 该选项默认是关闭的，只要将规则添加到全局tsconfig.json文件并将该选项设置为false，就可以轻松地打开整个应用程序：

tsconfig.json{

"compileOnSave": false,

"compilerOptions": {

"outDir": "./dist/out-tsc",

"sourceMap": true,

"declaration": false,

"moduleResolution": "node",

"emitDecoratorMetadata": true,

"experimentalDecorators": true,

"target": "es5",

"typeRoots": ["node_modules/@types"],

"lib": ["es2017", "dom"]

},

"angularCompilerOptions": {

"preserveWhitespaces": false

}

}

你也可以在每个组件的基础上设置选项，或者仅在特定组件中覆盖项目的默认值：

app.component.tsimport { Component } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css'],

preserveWhitespaces: false

})

export class AppComponent {

// ...

}

新特性

updateOn blur或submit

表单字段或整个表单新增了选项updateOn，它可以让Angular仅在blur或submit事件时检查有效性，而不是默认的变更事件，这有助于提高性能。

例如，给定一个模板驱动的表单，如下所示：

User Name:

required maxlength="25" id="user-name"

[(ngModel)]="userName" name="userName">

Register

你现在可以输入以下内容，让Angular仅在输入触发blur事件时才进行有效性检查：

required maxlength="25" id="user-name"

[(ngModel)]="userName" name="userName"

[ngModelOptions]="{updateOn: 'blur'}">

你也可以一次性对整个表单应用规则：

(ngSubmit)="onSubmit(newUserForm)"

[ngFormOptions]="{updateOn: 'blur'}">

...

在响应式表单，你可以添加这样的选项：ngOnInit() {

this.newUserForm = this.fb.group({

userName: ['Bob', { updateOn: 'blur', validators: [Validators.required] }]

});

}

路由事件

Angular路由器现在新增了一些的生命周期事件，以便在更细粒度的级别上对事件做出响应。 新事件如下：ActivationStart，ActivationEnd，ChildActivationStart，ChildActivationEnd，GuardsCheckEnd，GuardsCheckStart，ResolveStart和ResolveEnd。

@angular/service-worker

Angular 5现在提供了一个新的包@angular/service-worker，它可以让我们很方便地将服务worker添加到应用程序中。我们将在将来的文章中深入探讨它的使用。

升级

因为重大改变很少，升级应该是一个很简单的工作。 Angular团队还组合了一个方便的工具，让升级尽可能简单。

这里有一些可以帮助升级的点。 这假定你是从一个Angular 4应用升级的：你可以使用一个命令升级所有的Angular软件包：$ npm install @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@5.0.0

# or, using Yarn:

$ yarn add @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@5.0.0现在Angular 5依赖于TypeScript 2.4.2和RxJS 5.5.2，所以你也要升级这些包。如果你还没有这样做，请将项目的标签更改为。如果你正在使用Flex Layout for Angular，则需要确保升级到最新版本(撰写本文时为beta 10)，因为之前的版本使用了OpaqueToken，而在Angular5已把它移除。如果你还没有这样做，你可以开始将http调用迁移到Angular 4.3中引入的新HttpClient。传统的Http模块现在已经被弃用了。如果你使用日期，货币或百分比管道，则可能需要更改语法，因为Angular现在使用自己的实现来管理这些管道，而不是依靠浏览器的i18n API。 有关所有详细信息，请参阅变更日志的i18n部分。RxJS 5.5版最近也发布了，RxJS v5.5.2是Angular 5应用程序的默认版本。 你的代码可以保持完全一样，但是RxJS正在转移到lettable operators ，以改善tree shaking，并使其更容易创建自定义运算符。 因此，开始将可观察管道代码转换为新的语法可能是一个好主意。

以下是旧语法的一个简单例子：import { Component, OnInit } from '@angular/core';

import { Observable } from 'rxjs/Observable';

import 'rxjs/add/observable/of';

import 'rxjs/add/operator/map';

import 'rxjs/add/operator/filter';

import 'rxjs/add/operator/do';

@Component({ ... })

export class AppComponent implements OnInit {

myObs = Observable.of('Hello', 'Alligator', 'World!');

ngOnInit() {

this.myObs

.do(x => console.log('The do operator is the do operator!'))

.filter(x => x.length > 8)

.map(x => x.toUpperCase())

.subscribe(x => console.log(x));

}

}

...新的可用操作符语法的例子变成：import { Component, OnInit } from '@angular/core';

import { of } from 'rxjs/observable/of';

import { map, filter, tap } from 'rxjs/operators';

@Component({ ... })

export class AppComponent implements OnInit {

myObs = of('Hello', 'Alligator', 'World!');

ngOnInit() {

this.myObs

.pipe(

tap(x => console.log('The do operator is now tap!')),

filter(x => x.length > 8),

map(x => x.toUpperCase())

)

.subscribe(x => console.log(x));

}

}

注意所有操作符是如何从一个导入语句中导入的，以及它们是如何使用pipe方法合并的。 当使用可用操作符时，一些操作符更改了名称。 例如，do操作符变成tap。

有了这个，你现在应该已经准备好进入Angular 5，并从更快更小的应用程序中受益。