Angular2入坑指南——服务
在开发过程中,对于mvc开发模式来说,使用公共组件和公共服务,可以大大提高开发速率,那么如何来封装或者说如何来定义一个公共服务呢?今天老猴子来讲解下如何定义公共服务。
拿http请求举例,这个是最常用的功能,获取数据和传递数据都需要用到http,我们来看下如何定义公共服务来传递和接收数据。
首先我们创建一个service,我们可以使用命令行来快速创建,ng g service ***,然后在正文中引入以下几个模块:
import { Injectable } from '@angular/core'; import { Http, Response, Headers } from '@angular/http'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/catch'; import 'rxjs/add/observable/of'; import 'rxjs/add/operator/do'; import 'rxjs/add/operator/delay';
ng2推荐使用Rxjs来进行数据交互,使用Observable(可观察对象)来响应,为什么使用Observable,而不是用Response呢?我在之后的文章中会具体详细的来分析这两者的区别。
引入模块之后,我们开始设置注射器
@Injectable() export class LoginService { public postDatasUrl: string = "http://192.168.1.1:4200/***/****/GET"; constructor(private http: Http) { }; public login(data: any): Observable<any>{ const body = { USER_ACCOUNT: data.name, USER_PASSWORD: data.passWord }; return this.http.post(this.postDatasUrl,body).map((res:Response) => { let user = res.json(); console.log(user); if (user.results.user.user_NAME) { localStorage.setItem('userName',user.results.user.user_NAME); localStorage.setItem('userId',user.results.user.user_ID); } return user; }); };
然后我们在module里注册这个服务
import { LoginService } from "./login/login.service"; @NgModule({ providers: [ LoginService ], })
最后在component里引用这个服务
import { LoginService } from "./login.service"; constructor( public loginService: LoginService ) { }; onSubmit(event: any){ this.loginService .login(event) .subscribe( data => { if (data.results.msg == "登录成功" && data.results.user.user_MODE != 0) { this.router.navigate(['/app-index']); }else if(data.results.user.user_MODE == 0) { alert('此账号未被激活!'); }else if(data.results.msg == "用户名或密码错误"){ alert('用户名或密码错误'); }; console.log(data.results.user.user_MODE); }, err => alert('登录失败!') ) };
简言之就是,如果想封装成公共服务,就需要使用Injectable,然后在需要的模块中注册并引用就可以正常的使用了。是不是很方便~~~
以上是我总结的ng2封装公共服务的方式,如有疏漏,欢迎大家来稿,也欢迎大家一同分享技术,共同进步。