ng2 學習筆記（三）依賴注入與服務

前兩篇文章簡單介紹了ng2的一些基礎用法，基本和ng1的使用風格差很少，只是寫法和開發方式變化比較大。

這一篇，來總結一下ng的依賴注入與服務。官方的教程上是把他分開來說的，我的感受放在一塊兒比較容易理解。

一樣，這篇文章適合新手閱讀。好，那咱們開始正文：

在ng1，也有依賴注入的概念，ng1的依賴注入方式這裏就不去多敘述了，有興趣的能夠查閱一下ng1的依賴注入方式。

ng2依然有這個概念。下面舉例來講明ng2裏怎麼使用依賴注入以及服務：

【場景】：在某個項目裏面，有不少頁面都用到同一個功能，這個功能是檢測用戶登陸狀態。根據sessionStorage裏存在的user字段進行判斷，若是存在而且值不爲空，則確認用戶已登陸，不然提示用戶登陸。

【任務】：將這個通用的判斷函數，註冊成一個服務，在不一樣的地方提供隨時調用。

【開始】：

　　首先，在咱們的項目裏新建一個文件userLogService.ts來定義這個service：

// 引入注射器模塊
import { Injectable } from '@angular/core';

// @Injectable()這句話的意思是告訴angular，這個class是能夠被注入的，若是不寫，在注入時會報錯，「（）」也不要忘記
@Injectable()
export class UserLogService {
    checkState(){
        // 獲取user的值
        let user = window.sessionStorage.getItem('user');

        let result = user ? true : false;
        return result;
    }
}

這是一個簡單而貧血的服務，咱們不去管它，這個服務要怎麼使用它呢？好比在首頁，咱們就要判斷用戶狀態。

假設咱們有一個叫index.components.ts的首頁組件，你能夠這樣寫：

import { Component } from '@angular/core';

// 引入咱們自定義的服務
import { UserLogService } from '../service/myservice';


@Component({
    selector:'di-com',
    // 使用providers屬性將咱們定義的服務註冊到這個組件中
 providers: [UserLogService],
    template:`
        <div class="container-fluid">
            <div class="container">
                <h2>依賴注入 Dependence Injector實例</h2>
                <hr />
                <div *ngIf="userState">用戶已登陸</div>
                <div *ngIf="!userState">用戶未登陸</div>
            </div>
        </div>
    `
})

export class DIComponent {
    constructor(
        private userLogService: UserLogService // 聲明一個變量userLogService，並將其賦值爲咱們注入的服務
    ){}
    // 使用this.userLogService能夠調用服務裏面的方法；
    userState = this.userLogService.checkState();
}

這種注入方式是將服務註冊到單獨組件中，有時候，多個組件都要用到，這樣一個個的寫起來就有點繁瑣了，因此ng2還有一種注入方式：注入到module裏面(應用級別的注入)：

咱們須要在@NgModule裏注入：

@NgModule({
  ...
  providers: [

  　　UserLogService, 

　　　{ provide: APP_CONFIG, useValue: HERO_DI_CONFIG } 
　],
  ... 
}) 
export class AppModule { }

這種方式須要一個服務提供商，沒有服務提供商ng2會拋出一個錯誤；

至於服務提供商的知識，我尚未研究，等後續補充吧。

 

歡迎你們批評指正！