从@angular/http迁移到@angular/common/http遇到问题求助

我来帮你搞定这个迁移问题，之前我也做过类似的转换，其实主要是几个关键步骤要注意，咱们一步步来：

1. 先更新模块与导入依赖 #

首先得把旧的HttpModule替换成新的HttpClientModule，在你的根模块（比如AppModule）里修改：

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    // 移除原来的 HttpModule，添加下面这个
    HttpClientModule
    // ...其他你需要的模块
  ]
})
export class AppModule { }

然后在你的服务文件里，替换导入的类：

// 删掉这个旧导入：import { Http, Response } from '@angular/http';
import { HttpClient } from '@angular/common/http';
import { Category } from './your-category-file-path'; // 导入你的Category类
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

2. 修改API调用函数 #

原来用Http的代码大概是类似这样（结合你提到的可运行代码推测）：

// 旧代码示例
getCategories(): Observable<Category[]> {
  return this.http.get('你的API地址')
    .map((response: Response) => {
      const data = response.json();
      return data.Categories as Category[];
    });
}

换成HttpClient后，代码会更简洁，但要注意它不会自动把JSON对象转换成类的实例——如果你的Category只有属性没有方法，用类型断言就够；如果类里有自定义方法，就得手动创建实例：

场景一：Category只有属性（简单映射） #

getCategories(): Observable<Category[]> {
  return this.http.get<{ Categories: Category[] }>('你的API地址')
    .pipe(
      map(response => response.Categories)
    );
}

场景二：Category包含自定义方法（需要真实实例） #

getCategories(): Observable<Category[]> {
  return this.http.get<{ Categories: any[] }>('你的API地址')
    .pipe(
      map(response => 
        response.Categories.map(json => {
          // 手动创建Category实例并赋值
          const category = new Category();
          category.name = json.name;
          category.routetype = json.routetype;
          return category;
          // 或者用Object.assign简化：return Object.assign(new Category(), json);
        })
      )
    );
}

3. 组件中调用的方式 #

调用逻辑和之前差不多，订阅Observable即可：

categories: Category[] = [];

constructor(private yourService: YourService) {}

ngOnInit() {
  this.yourService.getCategories().subscribe(categories => {
    this.categories = categories;
    console.log(this.categories); // 现在就能拿到正确映射的Category数组了
  });
}

容易踩的坑 #

• 千万别忘了在根模块导入HttpClientModule，不然会出现注入失败的错误；
• RxJS 6+版本里，操作符（比如map）必须用pipe包裹，而且要从rxjs/operators导入；
• 一定要注意API返回的结构——你要的是response.Categories数组，不是整个响应对象，别直接返回整个response。

这样操作后，应该就能顺利完成迁移，并且正确把API返回的JSON映射到你的Category类了。

内容的提问来源于stack exchange，提问作者Tony