首页 > 代码库 > 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 学习笔记(三)依赖注入与服务
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。