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