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封装公共服务的方式，如有疏漏，欢迎大家来稿，也欢迎大家一同分享技术，共同进步。