最近在使用Angular作為前端框架進行開發時發現各版本存在一定的差異，尤其是對於依賴架包的引入，網上搜集了一些資料進行整理，主要需要注意以下幾點。具體示例可查看https://www.cnblogs.com/54hsh/p/11512818.html
1、http的調用，以Angular4.3為分界點
1）、import方式
| 舊版 | 新版(>V4.3) |
|---|---|
|
import { Http } from '@angular/http';
|
import { HttpClient } from '@angular/common/http';
|
|
import { Headers } from '@angular/http';
|
import { HttpHeaders } from '@angular/common/http';
|
| import { Request } from '@angular/http'; | import { HttpRequest } from '@angular/common/http'; |
|
import { Response } from '@angular/http';
|
import { HttpResponse } from '@angular/common/http'; |
|
......
|
...... |
2）、調用示例，pipe的使用方式以及API命名不一樣
| 調用方式 | 舊版 | 新版(>V4.3) |
| get |
http.
get(url, options)
.
map(
this.extractData)
.
catch(
this.handleError);
|
httpClient.
get(url, options)
.
pipe(
map(
this.extractData),
catchError(
this.handleError));
|
| post |
http.
post(url, params, options)
.
map(
this.extractData)
.
catch(
this.handleError);
|
httpClient.
post(url, params, options)
.
pipe(
map(
this.extractData),
catchError(
this.handleError));
|
| put |
http.
put(url, params, options)
.
map(
this.extractData)
.
catch(
this.handleError);
|
httpClient.
put(url, params, options)
.
pipe(
map(
this.extractData),
catchError(
this.handleError));
|
| delete |
http.
delete(url, options)
.
map(
this.extractData)
.
catch(
this.handleError);
|
httpClient.
delete(url, options)
.
pipe(
map(
this.extractData),
catchError(
this.handleError));
|
| 調用示例：
httpUtil.
put(
'http://localhost/sys/menu/edit' ,
this.menu)
.
subscribe(
data
=> {
if (data.code
== CodeEnum.SUCCESS) {
this.msg
=
"修改成功";
setTimeout(()
=> {
super.
goBack() },
3000);
}
else {
this.msg
=
"修改失敗";
}
},
error
=>
this.errorMessage
= <
any>error);
|
||
2、rxjs的變換，以rxjs6為分界點
1）、import方式
| import類型 | 舊版 | 新版(rxjs6) |
| Observable | import { Observable } from 'rxjs/observable'; | import { Observable } from 'rxjs'; |
| map | import 'rxjs/add/operator/map'; | import { map } from 'rxjs/operators'; |
| fromPromise | import 'rxjs/add/observable/fromPromise'; | import { fromPromise } from 'rxjs'; |
2）、API重命名
| 舊版 | 新版(rxjs6) |
| do() | tap() |
| catch() | catchError() |
| switch() | switchAll() |
| finally() | finalize() |
| throw() | throwError() |
| 新版(rxjs6)operators全部集中到rxjs/operator下進行管理 | |