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封裝公共服務的方式，若有疏漏，歡迎你們來稿，也歡迎你們一同分享技術，共同進步。