,1,创建一个服务
//创建一个服务文件http.service.ts
里面的代码
import {Injectable } from '@angular/core';import {Http, Response } from '@angular/http';import 'rxjs/add/operator/map';import 'rxjs/add/operator/catch';@Injectable()export class myHttpService {constructor(private http: Http) {}//向myUrl所对应的服务器发起请求sendRequest(myUrl:string){//创建get请求路径通过参数来传return this.http.get(myUrl).map((response: Response) => response.json());}}
2,html界面
//列表接收数据<ul><li *ngFor="let item of dataList">标题:{{item.title}}——价格:{{item.price}}</li></ul>//通过点击button来获取数据<button (click)='getData()'>获取数据</button>
3,component中
//引入服务import {myHttpService} from './http.service';//创建接收数据的数组dataList:Array<any>=[];//click事件中的方法getData(){//因为服务器端口不一样,涉及到跨域访问所有需要在PHP头部加入头部//header("Access-Control-Allow-Origin:*");this.myHttp.sendRequest("http://127.0.0.1/111/emp.php").subscribe((result:any)=>{this.dataList=result});}
4,要使用http请求,需要在app.module.中引入
import {HttpModule} from '@angular/http';import {myHttpService} from './demo14/http.service';providers:[myHttpService],imports: [HttpModule]