[Day04]Angular 2教程:04 注入依賴

最新推荐文章于 2025-11-26 17:11:00 发布

转载最新推荐文章于 2025-11-26 17:11:00 发布 · 444 阅读

文章标签：

#angular #javascript #前端 #框架

30天精通Angular2 专栏收录该内容

8 篇文章

订阅专栏

本文深入讲解Angular中的依赖注入(DI)机制，通过对比非DI版本和DI版本的Car类实例，展示DI带来的灵活性提升。同时介绍了Angular DI的核心组成部分：Injector、Provider及Dependency，并给出具体的实现示例。

说明:本系列是30天精通Angular2系列，此教程会第一时间发布在最三方平台，希望给你带来帮助！

本文出自最三方Angular系列教程，转载请注明出处！

前言
注入依赖 (Dependency injection, DI) 是 Angular 最大的特色和卖点。他是一种非常重要的设计模式。他让不同的 Components 可以注入依赖在整个网页程序。Components 不需要知道依赖如何产生，也不需要知道彼此需要依赖。

摘要
一个 Injector (注入)用 providers 创建 dependencies(依赖)。 Providers 会知道如何去创建 dependencies。
TS 中的型别注释(Type annotations)可以被用来要求 dependencies 。此外每个 Component 都会有自己的 injector，组成一个架构谱。用一个一个 provider 如 @NgModule、 @Component或@Directive来创建 Injector
在 Component 的 constructor 注入服务。

Why DI?
非 DI 版本实例 Car：

 
        01export class Car {
 
        02  public engine: Engine;
 
        03  public tires: Tires;
 
        04  public description = 'No DI';
 
        05  constructor() {
 
        06    this.engine = new Engine();
 
        07    this.tires = new Tires();
 
        08  }
 
        09  // Method using the engine and tires
 
        10  drive() {
 
        11    return `${this.description} car with ` +
 
        12      `${this.engine.cylinders} cylinders and ${this.tires.make} tires.`
 
        13  }
 
        14}

这样缺点是灵活度很低，Car的所有零件都被写死了，以后想要给改变零件Engine、Tires，是否要写新的 Class？当零件越来越多，每个零件都可以换来换去，出错的概率就很大了。

再来看看 DI 版本的 Car：

 
        1export class Car {
 
        2  public description = 'DI';
 
        3  constructor(public engine: Engine, public tires: Tires) { }
 
        4}
 
        5 
 
        6let car = new Car(new Engine(), new Tires());

现在car可以轻松装上 Engine和Tires了。如果想要换零件，只是在宣告car的时候装上新的零件延伸 Class。

 
        1class V8Engine {
 
        2  constructor(public cylinders: number) { }
 
        3}
 
        4// 换上不同的发动机
 
        5let bigCylinders = 12;
 
        6let car = new Car(new V8Engine(bigCylinders), new Tires());

一个 Class 从外部接收依赖而非内部创建，这就是依赖注入(DI)。但每次要使用一个物件Car，需要自己制造零件Engine、Tires，还要自己组装零件实在是很费工夫的事情，若是可以直接使用一个物件Car，但所以东西都制造也组装好了，那该有多好！这时候我们有个injector已经帮你注册组装好，就如同品牌产品，直接领取一点也不费工夫，这便是注入依赖框架在做的事情啰！

//直接开走，不需要自己装轮胎，不需要自己装发动机

`1`	`let` `car = injector.get(Car);`

Angular DI
先看看这张图

在 Angular 2 中 DI 基本上是由三个东西组成的：

Injector - 会被实例依赖的注入对象。
Provider - 告诉 Injector 如何创建一个依赖实例的架构谱。
Dependency - 创建对象的 Type

实现

Angular提供自己的 DI 框架，还可以把这个框架独立运用到其他系统中。
Angular在启动时会自动创建injector。
bootstrap(AppComponent);

此时只需对provider参数注册实例。

 
        1bootstrap(AppComponent,
 
        2        [MyService]); // DISCOURAGED (but works)

但这样当很多的 Class 都要注册时，便显得非常不实际了。

本文由最三方开源平台( http://www.zuisanfang.com/archives/view-2086-1.html)原创，转载请保留版权和链接!