以下纯属个人学习中遇到的问题以及解决后的感悟,欢迎指点错误:
在Angular4 中 ,要用使用http请求服务器数据,应该在constructor中导入Http模块 , 如: constructor(private http: Http){},
在使用时,使用this.http.get(url).map(res => res.json());即可,其中map 源于 'rxjs/Rx'响应式模块中;
import { Injectable } from '@angular/core';
import {Http} from '@angular/http';
import {Observable} from 'rxjs';
import 'rxjs/Rx';
@Injectable({
providedIn: 'root'
})
export class ProductService {
constructor(private http: Http) { }
getProduct() {
return this.http.get(`/api/product`).map(res => res.json());
}
}
但在Angular6中, 要用使用http请求服务器数据,应该在constructor中导入HttpClient模块,因为Http模块在Angular6中已过时;后面若依旧按照如上方式编写,则会出现如下错误:
rxjs/Rx冒红可以在tslint.json文件中,Ctrl+F 搜索rxjs/Rx,然后将true改成false, 但是依旧map方法依旧报错,可能map方法不在rxjs/Rx中了吧; 后来查询得知,map方法存在于 'rxjs/operators'; 故引入即可;在Angular6中,map方法要放在pipe()中处理才不会报错;
修改过后如下:
import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';
import {map} from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class ProductService {
constructor(private http: HttpClient) { }
getProducts(): Observable<Product[]>{
return this.http.get(`/api/product`).pipe(map(res => res.json()));
}
}