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会抛出一个错误；

至于服务提供商的知识，我尚未研究，等后续补充吧。

 

欢迎你们批评指正！