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