(七)Angular4 英雄征途HeroConquest-Http通信

1.首先在根组件 app.module.ts 中导入 HttpClientModule，即在该文件中有如下两处需修改

···省略其他···
import {HttpClientModule} from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    ···省略其他···
  ],
  imports: [
    ···省略其他···
    HttpClientModule,
    ···省略其他···

  ],
  providers: [

  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2.在需要http请求的组件编写如下：

import { Component, OnInit } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { HttpClient, HttpParams } from '@angular/common/http';

@Component({
  selector: 'app-upgrade',
  templateUrl: './upgrade.component.html',
  styleUrls: ['./upgrade.component.css']
})
export class UpgradeComponent implements OnInit {
  public res_data = {}; // 假设后端数据为字典的json序列
  public formData = new FormData(); 

   ngOnInit() {
    this.http_post('数据');
  }  

  http_post = (data) => {
    this.formData.append('params', data);
    this.httpClient.post('http://127.0.0.1:8080/test', this.formData)
      .subscribe(
        (res) => {
          res_data = res; 
          // 此处会自动反序列化，JSON.parse()
          // 或者如下处理 res_data = res | {}; 
        },
        (error) => {
          console.log('post请求失败', error);

        }
      );
  }
}