Angular 4 到 Angular6 http请求的变化

以下纯属个人学习中遇到的问题以及解决后的感悟，欢迎指点错误:

在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{
    return this.http.get(`/api/product`).pipe(map(res => res.json()));
  }

}