ng2 学习笔记(三)依赖注入与服务
2024-08-25 06:31:47
前两篇文章简单介绍了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会抛出一个错误;
至于服务提供商的知识,我还没有研究,等后续补充吧。
欢迎大家批评指正!
最新文章
- PowerDesigner从SqlServer数据库中导入实体模型
- 北京培训记day4
- LabVIEW 吸星大法 - 看见的好东西都是我的(下篇)
- 重构alert,confirm
- emberjs学习二(ember-data和localstorage_adapter)
- SpringMvc学习心得(五)控制器产生与构建
- yii2 sphinx Ajax搜索分页 关键词的缓存
- 记录:asp.net mvc 中 使用 jquery 实现html5 实现placeholder 密码框 提示兼容password IE6
- 电脑小白学习软件开发-C#语言基础之循环重点讲解,习题
- MVC Filter自定义验证(拦截)
- 在往oracle中插数据时,如何处理excel读取的时间空值
- 数据结构之顺序表,c#实现
- Mac OS X和iOS上基本数据类型的字节数
- 如何使用kaptcha验证码组件
- PAT 天梯赛 L1-009 N个数求和
- Weex的环境搭建以及集成到Android项目
- 【树链剖分】洛谷P3379 树链剖分求LCA
- js内置函数大全及基本使用方法(一)
- 转义字符\(在hive+shell以及java中注意事项):正则表达式的转义字符为双斜线,split函数解析也是正则
- String.getBytes()和String.tocharArray(),字节数组和字符数组的区别