模板驱动的表单
以前
<input name="firstName" ngmodel=""/>
以后
<input name="firstName" ngModel [ngModelOptions]="{updateOn: 'blur'}">
或者
<form [ngFormOptions]="{updateOn:'submit'}">
反应式表单
以前
new FormGroup(value); new FormControl(value, [], [myValidator])
以后
new FormGroup(value, {updateOn: 'blur'})); new FormControl(value, {updateOn: 'blur', asyncValidators: [myValidator]})
RxJS 5.5
我们已经把使用的RxJS更新到5.5.2或更高版本。这个新发布的RxJS可以让开发完全摆脱之前导入机制的副作用,因为我们以新的lettable operators的方式使用了RxJS。这些新操作符消除了副作用,以及之前导入操作符中“patch”方法存在代码切割和“tree shaking”等问题。
不再这样:
import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/filter'; names = allUserData .map(user => user.name) .filter(name => name);
现在这样:
import { Observable } from 'rxjs/Observable'; import { map, filter } from 'rxjs/operators'; names = allUserData.pipe( map(user => user.name), filter(name => name), );
此外,RxJS现在发行了一个使用ECMAScript Modules的版本。新Angular CLI会默认拉取这个新版本,让包大小有明显减小。如果你没使用Angular CLI,那还是应该指向这个新版本。相关文档在此:Build and Treeshaking。
新的路由器生成周期事件
我们给路由器添加了新的生命周期事件,让开发者可以跟踪running guard启动到激活完成的各个阶段。这些事件可在有子组件更新时,在一个特定的路由器出口上展示加载动画,或者测量性能。
新的事件(按顺序)是GuardsCheckStart、ChildActivationStart、ActivationStart、GuardsCheckEnd、ResolveStart、ResolveEnd、ActivationEnd、ChildActivationEnd。以下是一个使用这些事件启动和停止加载动画的示例:
class MyComponent { constructor(public router: Router, spinner: Spinner) { router.events.subscribe(e => { if (e instanceof ChildActivationStart) { spinner.start(e.route); } else if (e instanceof ChildActivationEnd) { spinner.end(e.route); } }); } }
如何更新
这里有Angular Update Guide,告诉你整个过程,以及更新前要做哪些事,还有更新应用的步骤,以及做好迎接Angular未来版本的准备等信息。