ng2 学习笔记依赖注入与服务

Posted 2020-09-04 一步小僧

前两篇文章简单介绍了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会抛出一个错误；

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

 

欢迎大家批评指正！