前端之Angular2实战：依赖注入详解与应用
Dependence Injection(依赖注入)
dependency-injection-in-angular-2
依赖注入是Angular中的最大的一个特性与卖点。它允许应用中不同的组件不需要显性地建立关联即可以相互调用。不同，Angular 1中的依赖注入仍然是存在着一些问题，这也是Angular 2完全重构了一套依赖注入系统的原因。Angular 1中的依赖注入系统主要存在的问题如下：
-
Internal Cache(内建缓存)：依赖一般是被当做单例对待，任何一个服务在整个应用的生命周期中都应该只被创建一次。
-
Synchronous by default(默认异步)：Angular 1中的服务创建不是异步创建的。
-
Namespace collision(命名空间冲突)：在应用的生命周期中某个”type”的token是唯一的，如果我们自定义了一个名为Car的服务，而引入的第三方框架中也存在着同名的Car的服务，那么整个系统就会存在问题。
-
Built into the framework(框架内建)：Angular 1的依赖注入是内建的，我们无法单独的进行使用。
Angular 2的依赖注入体系大概如下所示：
其中有几个关键的概念解释如下：
-
Injector(注入器)：Injector就类似于Spring里面的ApplicationContext，提供了一系列的接口以供依赖实例的创建。
-
Binding(绑定)：Binding的作用在于告诉Injector如何去为某个依赖创建实例。一个Binding需要映射到一个工厂类型的方法。
-
Dependence(依赖)：一个Dependence是某个对象被创建的类型。
最简单的Angular 2中的依赖注入的方式如下：
import { Injector } from 'angular2/di'; var injector = Injector.resolveAndCreate([ Car, Engine, Tires, Doors ]); var car = injector.get(Car);resolveAndCreate是一个静态的接口方法，根据输入的一系列的Binding来创建依赖的实例。而后，可以使用injector.get()方法来获取某个Type/Token对应的对象实例。而在使用这个依赖时，可以使用Angular 2内置的Inject：
import { Inject } from 'angular2/di'; class Car { constructor( @Inject(Engine) engine, @Inject(Tires) tires, @Inject(Doors) doors ) { ... } }Inject装饰器会自动将元数据绑定到Car类的属性中，也可以改写为TypeScript的方式：
class Car { constructor(engine: Engine, tires: Tires, doors: Doors) { ... } }到这一步，某个类可以声明它自己的依赖，并且被DI解析所有该类的依赖项。但是Injector还需要从Binding中获取如何去创建这些对象实例的信息。上文中是直接在resolveAndCreate方法中传入了一系列的Type/Token，而如果使用完整的写法，应该使用toClass方法显性的将某个Type/Token映射到某个实例。
import { bind } from 'angular2/di'; var injector = Injector.resolveAndCreate([ bind(Car).toClass(Car), bind(Engine).toClass(Engine), bind(Tires).toClass(Tires), bind(Doors).toClass(Doors) ]);上述方法中的token可以是任意的类型或者一个字符串，这也就是所谓的Recipe机制的具体实现。在这样的一种Binding的帮助下，不仅仅Injector知道如何在应用过程中使用这些依赖，并且配置了如何创建这些依赖。
进一步考虑，如果在应用中已经确定了Foo类型，那又何必要写bind(Foo).toClass(Foo)这样的表达式，直接在程序中引入写死即可，而依赖注入的真正魅力在于：
bind(Engine).toClass(OtherEngine)这样可以动态的为某个token绑定到依赖中，并且有效解决了命名空间冲突的问题。我们可以创建一个类似与接口的类型，然后将它指向到具体的类型中。就像Java中的Interface与Implementation。
Other binding instructions
有时候，我们并不一定需要将某个token绑定到某个类中，而是绑定到某个字符串值或者工厂方法中。
-
绑定到值
bind(String).toValue('Hello World')-
绑定到别名
bind(Engine).toClass(Engine) bind(V8).toAlias(Engine)toAlias方法将某个token绑定到另一个token中。
-
绑定到某个工厂方法
bind(Engine).toFactory(() => { if (IS_V8) { return new V8Engine(); } else { return new V6Engine(); } })当然，某个工厂方法可能也有其依赖项，只要简单地将依赖项指向到参数中并且添加到token列表中即可。
bind(Engine).toFactory((dep1, dep2) => { if (IS_V8) { return new V8Engine(); } else { return new V6Engine(); } }, [Token1, Token2])Transient Dependencies and Child Injectors(短暂性传递与子注入器)
在上文中提及的依赖项往往都是单例化的，但是有时候我们需要的是一个短暂的，即非单例模式的依赖，总体来说有两种方式：
-
使用工厂模式
bind(Engine).toFactory(() => { return new Engine(); })-
子注入器
可以使用Injector.resolveAndCreateChild()这个方法迭代地创建子注入器，一个子注入器会继承父类注入器中声明的依赖项，但是如果子注入器中也是声明了某个依赖，那么它创建的实例与父注入器创建的同样的token的实例是不一致的：
var injector = Injector.resolveAndCreate([Engine]); var childInjector = injector.resolveAndCreateChild([Engine]); injector.get(Engine) !== childInjector.get(Engine);
Component Dependence
@Component({ selector: 'app' }) @View({ template: '<h1>Hello !</h1>' }) class App { constructor() { this.name = 'World'; } } bootstrap(App);上述声明的Component是直接将name写死在了代码里，如果将获取名字的这部分提取出来作为一个单独的服务：
class NameService { constructor() { this.name = 'Pascal'; } getName() { return this.name; } } 如果需要使用NameService，那么在声明某个Component时候，就需要使用@Inject装饰器：
class App { constructor(@Inject(NameService) NameService) { this.name = NameService.getName(); } }如果是TypeScript，需要这么写：
class App { constructor(NameService: NameService) { this.name = NameService.getName(); } }而NameService的Injector以及Binding这一步，其实就是由bootstrap方法实现的：
bootstrap(App, [NameService]);当然，也可以写的更加优雅：
@Component({ selector: 'app', bindings: [NameService] }) @View({ template: '<h1>Hello !</h1>' }) class App { ... }正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
