angular2 Injectable http ng2使用服务(Injectable)加载(http)数据

最新推荐文章于 2025-03-13 13:20:22 发布

weixin_34357962

最新推荐文章于 2025-03-13 13:20:22 发布

阅读量408

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json ViewUI

原文链接：https://segmentfault.com/a/1190000007747136

本文介绍Angular中依赖注入的概念及如何在服务中使用HTTP请求获取数据。包括服务的定义、组件加载服务的方法以及如何全局配置服务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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