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<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]配置