文档章节

Angular基础(六) DI

zhixin9001
 zhixin9001
发布于 2017/08/23 22:16
字数 716
阅读 9
收藏 0

 

 

 

一、依赖注入

a) 如果模块A需要依赖模块B,通常的做法是在A中导入B,import{B} from ‘B’,但有一些场合需要解除这种直接依赖,比如单元测试时需要mock一个B对象、还有时要创建B的单例或者用工厂模式生成B,这时适合使用依赖注入(Dependency Injection)的方式来解除对B的直接依赖。

 

b) Angular的依赖注入框架包含三部分,Provider、Injector、Dependency,三者的关系为:

Provider的作用是建立类与其依赖项之间的映射(map\binding);Dependency为依赖项;Injector负责在创建对象的时候解析相关的依赖并根据Provider提供的绑定信息进行注入。

 

c) 记录用户登录信息的UserService是一个全局单例,对其注入并使用的例子为:

import{ Component, ReflectiveInjector } from '@angular/core';

import{ UserService } from '../services/user.service';

exportclass UserDemoComponent {

  userName: string;

  userService: UserService;

  constructor() {

    const injector: any =

ReflectiveInjector.resolveAndCreate([UserService]);

    this.userService =injector.get(UserService);

  }

  signIn(): void {

    this.userService.setUser({ name: 'Dante'});

    this.userName =this.userService.getUser().name;

  }

}

导入ReflectiveInjector类后,使用它的静态方法resolveAndCreate来创建一个injector,可被注入的内容以数组的形式从参数传入,injector.get(UserService)可以解析出一个UserService对象,这里将类本身作为token。

 

二、使用NgModule进行注入

a) 通过前面的代码可以直观地了解注入的过程,但实际使用中却不这样做,而是要在NgModule的providers中注册依赖项,然后通过装饰器在需要使用的类的构造函数中注入:

constructor(privateuserService: UserService) {}

需要注意的是,被注入的类要用@Injectable标记,而且这样是以单例的方式注入的,还有其它注入的形式,比如非单例类、注入一个值、调用方法并把方法的返回值注入等。

providers:[UserService]这样的写法默认会注入UserService的单例,这实际上是一种简化的写法,provider的完整配置代码应该为

providers: [{ provide: UserService, useClass: UserService }],

provide字段指明了注入时的token,通过userClass\useValue等则可以设置注入对象和注入方式。

b) 注入值

//配置

providers:[{ provide: 'API_URL', useValue: 'http://api.com/v1' }]

//使用

import{ Inject } from '@angular/core';

constructor(@Inject('API_URL')apiUrl: string) {}

使用的时候要用到@Inject标记,使用这种写法可以注入全局常量。

 

c) 调用方法

{provide: 'API_URL', useFactory() { return 'api.com'; }

使用useFactory来调用方法作为返回值,可以使用上面的写法,也可以使用lambda表达式的形式useFactory : ( )=>…

useFactory指向的方法的返回值将会被注入。

d) 如果调用的方法需要传入参数,可以使用第三个属性:deps,比如API_URL1要用到API_URL的值作为参数:

{provide: 'API_URL1', deps: ['API_URL'], useFactory(apiUrl: string) { returnapiUrl + 'api.com'; }

那么如果要注入非单例对象,也可以通过useFactory来实例化并返回了。

 

 

 

 

© 著作权归作者所有

zhixin9001
粉丝 6
博文 111
码字总数 104891
作品 0
西安
私信 提问
试读angular源码第一章:开场与platformBrowserDynamic

开场来个自我介绍 angular 源码阅读 项目地址 文章地址 angular 版本:8.0.0-rc.4 欢迎看看我的类angular框架 关于为什么写这么一个项目 声明:仅仅为个人阅读源码的理解,不一定完全正确,还...

全菜工程师
05/27
0
0
ngular2 VS Angular4 深度对比:特性、性能

在Web应用开发领域,Angular被认为是最好的开源JavaScript框架之一。 Google的Angular团队已于3月23日发布了Angular4,而期待已久的Angular2版本则是之前版本的完全重构。 对于成熟的开发人员...

机器的心脏
2018/06/02
0
0
JavaScript MVW 框架 - AngularJS

Angular JS (Angular.JS) 是一组用来开发 Web 页面的框架、模板以及数据绑定和丰富 UI 组件。它支持整个开发进程,提供 Web 应用的架构,无需进行手工 DOM 操作。 AngularJS 很小,只有 60K,...

匿名
2011/01/20
357.1K
46
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
197
0
5ThingsToKnowBeforeYouGetStartedWithAngulerJS

AngularJS is Entirely Client-Side AngularJS is written in JavaScript, and it functions entirely on the client side. This means two things for your app. First, you can run Angula......

perfectspr
2014/12/16
48
0

没有更多内容

加载失败,请刷新页面

加载更多

对比ubuntu与centos系统 ​​​​

CentOS与Ubuntu该如何选择,哪个更好用。笔者在自媒体平台收集了一些网友的观点,较为经典,分享给大家。至于应该选择哪个,希望看完本文章后,读者心中有数。 观点1:CentOS适用于服务器,U...

老孟的Linux私房菜
今天
12
0
Java的基本类型

一、Java的基本类型 Java的基本类型有哪些? boolean char byte short int long float double ? 延伸思考 思考一:为什么有的书籍说Java存在第9种数据类型? 实际上,JAVA中还存在另外一种基...

yumoop
今天
14
0
OSChina 周四乱弹 —— 富婆小时候

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @猿敲月下码 :#今日歌曲推荐# 分享陈慧娴的单曲《夜机》 《夜机》- 陈慧娴 手机党少年们想听歌,请使劲儿戳(这里) @開源中國張學友 :早上...

小小编辑
今天
23
0
MyMinimad ── Linux下用libmad写的mp3解码播放程序(四)

优化了内存使用,不再使用mmap映射整个文件到内存 /* * 本程序是从 minimad 改进而来,如要更详细的说明请参看 minimad.c * * Gu Zhou, 2009/12/25, SiChuan University, China *...

代码强国
今天
18
0
Minikube安装

1、下载Minikube二进制文件 sudo curl -Lo minikube https://kubernetes.oss-cn-hangzhou.aliyuncs.com/minikube/releases/latest/minikube-linux-amd64 2、设置权限 sudo chmod +x minikube......

RogueQ
今天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部