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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!