Angular 5 功能大躍進

如果你仍然還在用Angular2，請跟上時候改成.Angular 5吧（也稱為Pentagonal-donut）有很多新功能更好的性能，真心推薦。

如果您想將舊的角度2應用程序更新為Angular 5，那麼本教程適合您。

從Angular2,4升級到Angular5並不是太難的任務，因為變化非常少。 Angular團隊還提供了一個方便的工具，可以從任何版本升級到角度5，盡可能簡單。

以下是升級應用程序時要記住的幾點：

將項目的所有標記重命名為標記，因為自v4以來該元素已被棄用。

您必須將所有Angular包升級到5.0版，運行以下命令：

$ npm install @ angular / {animations，common，compiler，compiler-cli，core，forms，http，platform-b​​rowser，platform-b​​rowser-dynamic，platform-server，router} @ 5.0.0

＃或，使用Yarn：

$ yarn add @ angular / {animations，common，compiler，compiler-cli，core，forms，http，platform-b​​rowser，platform-b​​rowser-dynamic，platform-server，router} @ 5.0.0

Angular 5現在也依賴於TypeScript 2.4.2和RxJS 5.5.2，所以你也必須升級這些包。

npm install <a href="mailto:typescript@2.4.2"> typescript@2.4.2 </a> --save-exact

如果您依賴日期，貨幣，小數或百分比管道，您將看到格式的細微更改。對於使用en-us以外的語言環境的應用程序，您需要從@ angular / common / i18n_data / locale_fr和registerLocaleData（local）導入它並可選地導入locale_extended_fr。有關管道中斷更改的更多信息，請訪問：stackoverflow.com/a/47263949/2810015

使用工具而不是隨任何生命週期事件一起擴展：確保不使用擴展OnInit，或使用擴展到任何生命週期事件。相反，使用工具。

從HttpModule和Http服務切換到HttpClientModule和HttpClient服務。 HttpClient簡化了默認的人機工程學（您不再需要映射到json並刪除任何不再需要的map（res => res.json（））調用。）現在支持類型返回值和攔截器。

這是舊的語法的快速範例：
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 extends 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));

}

}

... and the same example with the new lettable operator syntax becomes:

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));

}

}

了解有關如何將您的應用程序升級到Angular 5的更多信息https://onlyforcoder.blogspot.in/2017/11/angular5QuickStart.html

Angular 5功能：https：//onlyforcoder.blogspot.in/2017/11/angular5Features-Pentagonal-donutfeatures.html