ts获取服务器数据_angular2 Injectable http ng2使用服务(Injectable)加载(http)数据

ng2依赖注入，服务中使用http获取服务器数据

1、 定义服务

import {Injectable} from "@angular/core";

import {Http, Jsonp} from "@angular/http";

import "rxjs/add/operator/map";

@Injectable()

export class AppServer {

constructor(public http:Http, public jsonp:Jsonp) {

}

// http.get

httpGet(url, params) {

return this.http.get(url, {search: params}).map(result=>result.json());

}

// http.post

httpPost(url, params) {

return this.http.post(url, params).map(result=>result.json());

}

// jsonp

jsonpGet(url, params) {

return this.jsonp.get(url, {search: params}).map(result=>result.json());

}

}

2、 定义组件， 加载服务

import {Component, OnInit} from "@angular/core";

// 获取路由传递传递过来的params(id) 增加模块激活的路由(ActivatedRoute)

import {ActivatedRoute} from "@angular/router";

import {AppServer} from "./app.service";

import {URLSearchParams} from "@angular/http";

@Component({

selector: "my-info",

templateUrl: "../templates/about-info.html",

providers: [AppServer]

})

export class AboutInfoComponent implements OnInit {

// 定义一个变量, 获取服务方法取得的数据

info:Number;

data:Array;

// 初始化变量, 这里必须加修饰词 public private, 初始化服务, 然后使用服务方法,调取数据

constructor(public infos:AppServer) {

}

// 方法中操作id, 通过id查询信息等等

ngOnInit(){

var url = "http://localhost:3000/login";

var params = new URLSearchParams();

params.set("id", "1");

// 传递过来的不是promise 所以要subscribe执行

this.infos.getHttp(url, params).subscribe(res=> {

console.log(res);

}

);

}

}

3、 上面组件中局部加载了这个服务， 如果需要全局导入服务 app.module.ts文件中

providers: [AppServer]配置