Angular 第八章 Http通讯

第一步：在app.module.ts中导入HttpModule模块

import {HttpModule} from '@angular/http';
imports: [
    BrowserModule,
    HttpModule

  ]

第二步：在要使用http服务的组件中注入http服务：

  constructor(http:Http) { } //在此处注入http服务

第三步： 使用http服务发送get请求，对返回的流的数据处理有两种方式

【1】使用订阅流的方式来获取数据

   ##1 组件控制器中：

import {Observable} from 'rxjs';  //需要引入Observable
import 'rxjs/Rx'; //map使用时需要导入此模块
import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';

@Component({
  selector: 'app-stock',
  templateUrl: './stock.component.html',
  styleUrls: ['./stock.component.css']
})
export class StockComponent implements OnInit {
  dataSourse:Observable<any>;
  stocks=[];

  constructor(public http:Http) {//在此处注入http服务
    this.dataSourse= this.http.get('/stock').map(response=>response.json());
    //this.http.get('/stock')返回的是一个流
    //this.http.get('/stock').map(response=>response.json()); 通过map函数将服务器返回的流变成json格式的数据
   } 
  
  ngOnInit() {
   this.dataSourse.subscribe(
     data=>this.stocks=data
   )
    
  }

}

 ##2组件模板中

<p>股票信息</p>
<ul>
  <li *ngFor="let stock of stocks">{{stock.name}}</li>
</ul>

【2】使用异步管道来处理返回的流数据

##1 组件控制器中

import {Observable} from 'rxjs';  //需要引入Observable
import 'rxjs/Rx'; //map使用时需要导入此模块
import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';

@Component({
  selector: 'app-stock',
  templateUrl: './stock.component.html',
  styleUrls: ['./stock.component.css']
})
export class StockComponent implements OnInit {
  stocks:Observable<any>;

  constructor(public http:Http) {//在此处注入http服务
    this.stocks= this.http.get('/stock').map(response=>response.json());
    //this.http.get('/stock')返回的是一个流
    //this.http.get('/stock').map(response=>response.json()); 通过map函数将服务器返回的流变成json格式的数据
   } 
  
  ngOnInit() {
   
    
  }

}

##2 组件模板中

<p>股票信息</p>
<ul>
  <li *ngFor="let stock of stocks">{{stock.name|async}}</li>
</ul>