Angular 中的依赖注入link

Dependency injection in Angularlink

依赖注入（DI）是一种重要的应用设计模式。 Angular 有自己的 DI 框架，在设计应用时常会用到它，以提升它们的开发效率和模块化程度。

Dependency injection (DI), is an important application design pattern. Angular has its own DI framework, which is typically used in the design of Angular applications to increase their efficiency and modularity.

依赖，是当类需要执行其功能时，所需要的服务或对象。 DI 是一种编码模式，其中的类会从外部源中请求获取依赖，而不是自己创建它们。

Dependencies are services or objects that a class needs to perform its function. DI is a coding pattern in which a class asks for dependencies from external sources rather than creating them itself.

在 Angular 中，DI 框架会在实例化该类时向其提供这个类所声明的依赖项。本指南介绍了 DI 在 Angular 中的工作原理，以及如何借助它来让你的应用更灵活、高效、健壮，以及可测试、可维护。

In Angular, the DI framework provides declared dependencies to a class when that class is instantiated. This guide explains how DI works in Angular, and how you use it to make your apps flexible, efficient, and robust, as well as testable and maintainable.

我们先看一下英雄指南中英雄管理特性的简化版。这个简化版不使用 DI，我们将逐步把它转换成使用 DI 的。

Start by reviewing this simplified version of the heroes feature from the The Tour of Heroes. This simple version doesn't use DI; we'll walk through converting it to do so.

      
        content_copy
      
      import { Component } from '@angular/core';

@Component({
  selector: 'app-heroes',
  template: `
    <h2>Heroes</h2>
    <app-hero-list></app-hero-list>
  `
})
export class HeroesComponent { }
    

HeroesComponent 是顶层英雄管理组件。 它唯一的目的是显示 HeroListComponent，该组件会显示一个英雄名字的列表。

HeroesComponent is the top-level heroes component. Its only purpose is to display HeroListComponent, which displays a list of hero names.

HeroListComponent 的这个版本从 HEROES 数组（它在一个独立的 mock-heroes 文件中定义了一个内存集合）中获取英雄。

This version of the HeroListComponent gets heroes from the HEROES array, an in-memory collection defined in a separate mock-heroes file.

      
        content_copy
      
      export class HeroListComponent {
  heroes = HEROES;
}
    

这种方法在原型阶段有用，但是不够健壮、不利于维护。 一旦你想要测试该组件或想从远程服务器获得英雄列表，就不得不修改 HeroesListComponent 的实现，并且替换每一处使用了 HEROES 模拟数据的地方。

This approach works for prototyping, but is not robust or maintainable. As soon as you try to test this component or get heroes from a remote server, you have to change the implementation of HeroesListComponent and replace every use of the HEROES mock data.

创建和注册可注入的服务link

Create and register an injectable servicelink

DI 框架让你能从一个可注入的服务类（独立文件）中为组件提供数据。为了演示，我们还会创建一个用来提供英雄列表的、可注入的服务类，并把它注册为该服务的提供者。

The DI framework lets you supply data to a component from an injectable service class, defined in its own file. To demonstrate, we'll create an injectable service class that provides a list of heroes, and register that class as a provider of that service.

创建可注入的服务类link

Create an injectable service classlink

Angular CLI 可以用下列命令在 src/app/heroes 目录下生成一个新的 HeroService 类。

The Angular CLI can generate a new HeroService class in the src/app/heroes folder with this command.

      
        content_copy
      
      ng generate service heroes/hero
    

下列命令会创建 HeroService 的骨架。

The command creates the following HeroService skeleton.

      
        content_copy
      
      import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class HeroService {
  constructor() { }
}
    

@Injectable() 是每个 Angular 服务定义中的基本要素。该类的其余部分导出了一个 getHeroes 方法，它会返回像以前一样的模拟数据。（真实的应用可能会从远程服务器中异步获取这些数据，不过这里我们先忽略它，专心实现服务的注入机制。）

The @Injectable() is an essential ingredient in every Angular service definition. The rest of the class has been written to expose a getHeroes method that returns the same mock data as before. (A real app would probably get its data asynchronously from a remote server, but we'll ignore that to focus on the mechanics of injecting the service.)

      
        content_copy
      
      import { Injectable } from '@angular/core';
import { HEROES } from './mock-heroes';

@Injectable({
  // we declare that this service should be created
  // by the root application injector.
  providedIn: 'root',
})
export class HeroService {
  getHeroes() { return HEROES; }
}
    

用服务提供者配置注入器link

Configure an injector with a service providerlink

我们创建的类提供了一个服务。@Injectable() 装饰器把它标记为可供注入的服务，不过在你使用该服务的 provider 提供者配置好 Angular 的依赖注入器之前，Angular 实际上无法将其注入到任何位置。

The class we have created provides a service. The @Injectable() decorator marks it as a service that can be injected, but Angular can't actually inject it anywhere until you configure an Angular dependency injector with a provider of that service.

该注入器负责创建服务实例，并把它们注入到像 HeroListComponent 这样的类中。 你很少需要自己创建 Angular 的注入器。Angular 会在执行应用时为你创建注入器，第一个注入器是根注入器，创建于启动过程中。

The injector is responsible for creating service instances and injecting them into classes like HeroListComponent. You rarely create an Angular injector yourself. Angular creates injectors for you as it executes the app, starting with the root injector that it creates during the bootstrap process.

提供者会告诉注入器如何创建该服务。 要想让注入器能够创建服务（或提供其它类型的依赖），你必须使用某个提供者配置好注入器。

A provider tells an injector how to create the service. You must configure an injector with a provider before that injector can create a service (or provide any other kind of dependency).

提供者可以是服务类本身，因此注入器可以使用 new 来创建实例。 你还可以定义多个类，以不同的方式提供同一个服务，并使用不同的提供者来配置不同的注入器。

A provider can be the service class itself, so that the injector can use new to create an instance. You might also define more than one class to provide the same service in different ways, and configure different injectors with different providers.

你可以在三种位置之一设置元数据，以便在应用的不同层级使用提供者来配置注入器：

You can configure injectors with providers at different levels of your app, by setting a metadata value in one of three places:

• 在服务本身的 @Injectable() 装饰器中。

  In the @Injectable() decorator for the service itself.

• 在 NgModule 的 @NgModule() 装饰器中。

  In the @NgModule() decorator for an NgModule.

• 在组件的 @Component() 装饰器中。

  In the @Component() decorator for a component.

@Injectable() 装饰器具有一个名叫 providedIn 的元数据选项，在那里你可以指定把被装饰类的提供者放到 root 注入器中，或某个特定 NgModule 的注入器中。

The @Injectable() decorator has the providedIn metadata option, where you can specify the provider of the decorated service class with the root injector, or with the injector for a specific NgModule.

@NgModule() 和 @Component() 装饰器都有用一个 providers 元数据选项，在那里你可以配置 NgModule 级或组件级的注入器。

The @NgModule() and @Component() decorators have the providers metadata option, where you can configure providers for NgModule-level or component-level injectors.

注入服务link

Injecting serviceslink

HeroListComponent 要想从 HeroService 中获取英雄列表，就得要求注入 HeroService，而不是自己使用 new 来创建自己的 HeroService 实例。

In order for HeroListComponent to get heroes from HeroService, it needs to ask for HeroService to be injected, rather than creating its own HeroService instance with new.

你可以通过制定带有依赖类型的构造函数参数来要求 Angular 在组件的构造函数中注入依赖项。下面的代码是 HeroListComponent 的构造函数，它要求注入 HeroService。

You can tell Angular to inject a dependency in a component's constructor by specifying a constructor parameter with the dependency type. Here's the HeroListComponent constructor, asking for the HeroService to be injected.

      
        content_copy
      
      constructor(heroService: HeroService)
    

当然，HeroListComponent 还应该使用注入的这个 HeroService 做一些事情。 这里是修改过的组件，它转而使用注入的服务。与前一版本并列显示，以便比较。

Of course, HeroListComponent should do something with the injected HeroService. Here's the revised component, making use of the injected service, side-by-side with the previous version for comparison.

      
        content_copy
      
      import { Component }   from '@angular/core';
import { Hero }        from './hero';
import { HeroService } from './hero.service';

@Component({
  selector: 'app-hero-list',
  template: `
    <div *ngFor="let hero of heroes">
      {{hero.id}} - {{hero.name}}
    </div>
  `
})
export class HeroListComponent {
  heroes: Hero[];

  constructor(heroService: HeroService) {
    this.heroes = heroService.getHeroes();
  }
}
    

必须在某些父注入器中提供 HeroService。HeroListComponent 并不关心 HeroService 来自哪里。 如果你决定在 AppModule 中提供 HeroService，也不必修改 HeroListComponent。

HeroService must be provided in some parent injector. The code in HeroListComponent doesn't depend on where HeroService comes from. If you decided to provide HeroService in AppModule, HeroListComponent wouldn't change.

注入器树与服务实例link

Injector hierarchy and service instanceslink

在某个注入器的范围内，服务是单例的。也就是说，在指定的注入器中最多只有某个服务的最多一个实例。

Services are singletons within the scope of an injector. That is, there is at most one instance of a service in a given injector.

应用只有一个根注入器。在 root 或 AppModule 级提供 UserService 意味着它注册到了根注入器上。 在整个应用中只有一个 UserService 实例，每个要求注入 UserService 的类都会得到这一个服务实例，除非你在子注入器中配置了另一个提供者。

There is only one root injector for an app. Providing UserService at the root or AppModule level means it is registered with the root injector. There is just one UserService instance in the entire app and every class that injects UserService gets this service instance unless you configure another provider with a child injector.

Angular DI 具有分层注入体系，这意味着下级注入器也可以创建它们自己的服务实例。 Angular 会有规律的创建下级注入器。每当 Angular 创建一个在 @Component() 中指定了 providers 的组件实例时，它也会为该实例创建一个新的子注入器。 类似的，当在运行期间加载一个新的 NgModule 时，Angular 也可以为它创建一个拥有自己的提供者的注入器。

Angular DI has a hierarchical injection system, which means that nested injectors can create their own service instances. Angular regularly creates nested injectors. Whenever Angular creates a new instance of a component that has providers specified in @Component(), it also creates a new child injector for that instance. Similarly, when a new NgModule is lazy-loaded at run time, Angular can create an injector for it with its own providers.

子模块和组件注入器彼此独立，并且会为所提供的服务分别创建自己的实例。当 Angular 销毁 NgModule 或组件实例时，也会销毁这些注入器以及注入器中的那些服务实例。

Child modules and component injectors are independent of each other, and create their own separate instances of the provided services. When Angular destroys an NgModule or component instance, it also destroys that injector and that injector's service instances.

借助注入器继承机制，你仍然可以把全应用级的服务注入到这些组件中。 组件的注入器是其父组件注入器的子节点，它会继承所有的祖先注入器，其终点则是应用的根注入器。 Angular 可以注入该继承谱系中任何一个注入器提供的服务。

Thanks to injector inheritance, you can still inject application-wide services into these components. A component's injector is a child of its parent component's injector, and inherits from all ancestor injectors all the way back to the application's root injector. Angular can inject a service provided by any injector in that lineage.

比如，Angular 既可以把 HeroComponent 中提供的 HeroService 注入到 HeroListComponent，也可以注入 AppModule 中提供的 UserService。

For example, Angular can inject HeroListComponent with both the HeroService provided in HeroComponent and the UserService provided in AppModule.

测试带有依赖的组件link

Testing components with dependencieslink

基于依赖注入设计一个类，能让它更易于测试。 要想高效的测试应用的各个部分，你所要做的一切就是把这些依赖列到构造函数的参数表中而已。

Designing a class with dependency injection makes the class easier to test. Listing dependencies as constructor parameters may be all you need to test application parts effectively.

比如，你可以使用一个可在测试期间操纵的模拟服务来创建新的 HeroListComponent。

For example, you can create a new HeroListComponent with a mock service that you can manipulate under test.

      
        content_copy
      
      const expectedHeroes = [{name: 'A'}, {name: 'B'}]
const mockService = <HeroService> {getHeroes: () => expectedHeroes }

it('should have heroes when HeroListComponent created', () => {
  // Pass the mock to the constructor as the Angular injector would
  const component = new HeroListComponent(mockService);
  expect(component.heroes.length).toEqual(expectedHeroes.length);
});
    

那些需要其它服务的服务link

Services that need other serviceslink

服务还可以具有自己的依赖。HeroService 非常简单，没有自己的依赖。不过，如果你希望通过日志服务来报告这些活动，那么就可以使用同样的构造函数注入模式，添加一个构造函数来接收一个 Logger 参数。

Services can have their own dependencies. HeroService is very simple and doesn't have any dependencies of its own. Suppose, however, that you want it to report its activities through a logging service. You can apply the same constructor injection pattern, adding a constructor that takes a Logger parameter.

这是修改后的 HeroService，它注入了 Logger，我们把它和前一个版本的服务放在一起进行对比。

Here is the revised HeroService that injects Logger, side by side with the previous service for comparison.

      
        content_copy
      
      import { Injectable } from '@angular/core';
import { HEROES }     from './mock-heroes';
import { Logger }     from '../logger.service';

@Injectable({
  providedIn: 'root',
})
export class HeroService {

  constructor(private logger: Logger) {  }

  getHeroes() {
    this.logger.log('Getting heroes ...');
    return HEROES;
  }
}
    

该构造函数请求注入一个 Logger 的实例，并把它保存在一个名叫 logger 的私有字段中。 当要求获取英雄列表时，getHeroes() 方法就会记录一条消息。

The constructor asks for an injected instance of Logger and stores it in a private field called logger. The getHeroes() method logs a message when asked to fetch heroes.

注意，虽然 Logger 服务没有自己的依赖项，但是它同样带有 @Injectable() 装饰器。实际上，@Injectable() 对所有服务都是必须的。

Notice that the Logger service also has the @Injectable() decorator, even though it might not need its own dependencies. In fact, the @Injectable() decorator is required for all services.

当 Angular 创建一个构造函数中有参数的类时，它会查找有关这些参数的类型，和供注入使用的元数据，以便找到正确的服务。 如果 Angular 无法找到参数信息，它就会抛出一个错误。 只有当类具有某种装饰器时，Angular 才能找到参数信息。 @Injectable() 装饰器是所有服务类的标准装饰器。

When Angular creates a class whose constructor has parameters, it looks for type and injection metadata about those parameters so that it can inject the correct service. If Angular can't find that parameter information, it throws an error. Angular can only find the parameter information if the class has a decorator of some kind. The @Injectable() decorator is the standard decorator for service classes.

依赖注入令牌link

Dependency injection tokenslink

当使用提供者配置注入器时，就会把提供者和一个 DI 令牌关联起来。 注入器维护一个内部令牌-提供者的映射表，当请求一个依赖项时就会引用它。令牌就是这个映射表的键。

When you configure an injector with a provider, you associate that provider with a DI token. The injector maintains an internal token-provider map that it references when asked for a dependency. The token is the key to the map.

在简单的例子中，依赖项的值是一个实例，而类的类型则充当键来查阅它。 通过把 HeroService 类型作为令牌，你可以直接从注入器中获得一个 HeroService 实例。

In simple examples, the dependency value is an instance, and the class type serves as its own lookup key. Here you get a HeroService directly from the injector by supplying the HeroService type as the token:

      
        content_copy
      
      heroService: HeroService;
    

当你编写的构造函数中需要注入基于类的依赖项时，其行为也类似。 当你使用 HeroService 类的类型来定义构造函数参数时，Angular 就会知道要注入与 HeroService 类这个令牌相关的服务。

The behavior is similar when you write a constructor that requires an injected class-based dependency. When you define a constructor parameter with the HeroService class type, Angular knows to inject the service associated with that HeroService class token:

      
        content_copy
      
      constructor(heroService: HeroService)
    

很多依赖项的值都是通过类来提供的，但不是全部。扩展的 provide 对象让你可以把多种不同种类的提供者和 DI 令牌关联起来。

Many dependency values are provided by classes, but not all. The expanded provide object lets you associate different kinds of providers with a DI token.

• 欲知详情，参见不同种类的提供者。

  Learn more about different kinds of providers.

可选依赖link

Optional dependencieslink

HeroService 需要一个记录器，但是如果找不到它会怎么样？

HeroService requires a logger, but what if it could get by without one?

当组件或服务声明某个依赖项时，该类的构造函数会以参数的形式接收那个依赖项。 通过给这个参数加上 @Optional() 注解，你可以告诉 Angular，该依赖是可选的。

When a component or service declares a dependency, the class constructor takes that dependency as a parameter. You can tell Angular that the dependency is optional by annotating the constructor parameter with @Optional().

      
        content_copy
      
      import { Optional } from '@angular/core';
    

      
        content_copy
      
      constructor(@Optional() private logger: Logger) {
  if (this.logger) {
    this.logger.log(some_message);
  }
}
    

当使用 @Optional() 时，你的代码必须能正确处理 null 值。如果你没有在任何地方注册过 logger 提供者，那么注入器就会把 logger 的值设置为 null。

When using @Optional(), your code must be prepared for a null value. If you don't register a logger provider anywhere, the injector sets the value of logger to null.

小结link

Summarylink

本页中你学到了 Angular 依赖注入的基础知识。 你可以注册多种提供者，并且知道了如何通过为构造函数添加参数来请求所注入的对象（比如服务）。

You learned the basics of Angular dependency injection in this page. You can register various kinds of providers, and you know how to ask for an injected object (such as a service) by adding a parameter to a constructor.

在以下页面中可以深入了解 Angular DI 体系的能力及高级特性：

Dive deeper into the capabilities and advanced feature of the Angular DI system in the following pages:

• 要深入了解嵌套注入器，参见多级依赖注入

  Learn more about nested injectors in Hierarchical Dependency Injection.

• 到 DI 令牌与提供者中学习更多知识。

  Learn more about DI tokens and providers.

• 依赖注入实战中讲了一些你能用 DI 做的一些有意思的事。

  Dependency Injection in Action is a cookbook for some of the interesting things you can do with DI.