最近在使用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下进行管理 | |