脚本宝典收集整理的这篇文章主要介绍了angular2 Injectable http ng2使用服务(Injectable)加载(http)数据，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
ng2依赖注入，服务中使用http获取服务器数据
1、 定义服务
import {Injectable} From "@Angular/core";
import {Http, Jsonp} from "@angular/http";
import "RxJS/add/@R_406_1162@tor/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<Object>;
// 初始化变量, 这里必须加修饰词 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]配置
以上是脚本宝典为你收集整理的angular2 Injectable http ng2使用服务(Injectable)加载(http)数据全部内容，希望文章能够帮你解决angular2 Injectable http ng2使用服务(Injectable)加载(http)数据所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。