首页 > 代码库 > ng2 学习笔记(三)依赖注入与服务

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

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

 

欢迎大家批评指正!

 

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