首页 > 代码库 > angular2
angular2
1、定义服务
import {Injectable} from "@angular/core"; import {Http, Jsonp} from "@angular/http"; import "rxjs/add/operator/map"; @Injectable() export class HttpServer { constructor(public jsonp: Jsonp, public http: Http) { } /* * url: 服务器api接口地址 * params: 传递参数对象 */ // get方法 httpGet(url, params) { return this.http.get(url, {search: params}).map(res=>res.json); } // post方法 httpPost(url, params) { return this.http.post(url, {search: params}).map(res=>res.json); } // 跨域请求 jsonpGet(url, params) { return this.jsonp.get(url, {search: params}).map(res=>res.json()); } }
2、app.module.ts文件中引入服务
import {HttpServer} from "./http.server.ts";
...
providers: [HttpServer]
...
3、组件中使用服务获取数据
... import {URLSearchParams} from "@angular/http"; ... // 使用服务 // 设置参数 var params = new URLSearchParams(); params.set("callback", "JSONP_CALLBACK"); // 调用jsonpGet方法,跨域请求数据 httpServer.jsonpGet("http://localhost:3000/users", params).subscribe(res=> { console.log(res); });
1. 服务需要在constructor(public httpServer: HttpServer)参数中初始化, this.httpServer.httpGet()
2. 服务有两种引入方式,如果在全局引入,那么组件中还要引入文件路径,不用写,providers:[]
angular2
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。