多级注入器link

Hierarchical injectorslink

Angular 中的注入器有一些规则，您可以利用这些规则来在应用程序中获得所需的可注入对象可见性。通过了解这些规则，可以确定应在哪个 NgModule、组件或指令中声明服务提供者。

Injectors in Angular have rules that you can leverage to achieve the desired visibility of injectables in your apps. By understanding these rules, you can determine in which NgModule, Component or Directive you should declare a provider.

两个注入器层次结构link

Two injector hierarchieslink

Angular 中有两个注入器层次结构：

There are two injector hierarchies in Angular:

1. ModuleInjector 层次结构 —— 使用 @NgModule() 或 @Injectable() 注解在此层次结构中配置 ModuleInjector。

   ModuleInjector hierarchy—configure a ModuleInjector in this hierarchy using an @NgModule() or @Injectable() annotation.

2. ElementInjector 层次结构 —— 在每个 DOM 元素上隐式创建。除非您在 @Directive() 或 @Component() 的 providers 属性中进行配置，否则默认情况下，ElementInjector 为空。

   ElementInjector hierarchy—created implicitly at each DOM element. An ElementInjector is empty by default unless you configure it in the providers property on @Directive() or @Component().

ModuleInjectorlink

可以通过以下两种方式之一配置 ModuleInjector ：

The ModuleInjector can be configured in one of two ways:

• 使用 @Injectable() 的 providedIn 属性引用 @NgModule() 或 root 。

  Using the @Injectable() providedIn property to refer to @NgModule(), or root.

• 使用 @NgModule() 的 providers 数组。

  Using the @NgModule() providers array.

ModuleInjector 由 @NgModule.providers 和 NgModule.imports 属性配置。 ModuleInjector 是可以通过 NgModule.imports 递归找到的所有 providers 数组的扁平化。

ModuleInjector is configured by the @NgModule.providers and NgModule.imports property. ModuleInjector is a flattening of all of the providers arrays which can be reached by following the NgModule.imports recursively.

子 ModuleInjector 是在延迟加载其它 @NgModules 时创建的。

Child ModuleInjectors are created when lazy loading other @NgModules.

使用 @Injectable() 的 providedIn 属性提供服务的方式如下：

Provide services with the providedIn property of @Injectable() as follows:

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

@Injectable({
  providedIn: 'root'  // <--provides this service in the root ModuleInjector
})
export class ItemService {
  name = 'telephone';
}
    

@Injectable() 装饰器标识服务类。该 providedIn 属性配置指定的 ModuleInjector，这里的 root 会把让该服务在 root ModuleInjector 上可用。

The @Injectable() decorator identifies a service class. The providedIn property configures a specific ModuleInjector, here root, which makes the service available in the root ModuleInjector.

平台注入器link

Platform injectorlink

在 root 之上还有两个注入器，一个是额外的 ModuleInjector，一个是 NullInjector()。

There are two more injectors above root, an additional ModuleInjector and NullInjector().

思考下 Angular 要如何通过 main.ts 中的如下代码引导应用程序：

Consider how Angular bootstraps the app with the following in main.ts:

      
        content_copy
      
      platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {...})
    

bootstrapModule() 方法会创建一个由 AppModule 配置的注入器作为平台注入器的子注入器。也就是 root ModuleInjector。

The bootstrapModule() method creates a child injector of the platform injector which is configured by the AppModule. This is the root ModuleInjector.

platformBrowserDynamic() 方法创建一个由 PlatformModule 配置的注入器，该注入器包含特定平台的依赖项。这允许多个应用共享同一套平台配置。例如，无论您运行多少个应用程序，浏览器都只有一个 URL 栏。您可以使用 platformBrowser() 函数提供 extraProviders，从而在平台级别配置特定平台的额外提供者。

The platformBrowserDynamic() method creates an injector configured by a PlatformModule, which contains platform-specific dependencies. This allows multiple apps to share a platform configuration. For example, a browser has only one URL bar, no matter how many apps you have running. You can configure additional platform-specific providers at the platform level by supplying extraProviders using the platformBrowser() function.

层次结构中的下一个父注入器是 NullInjector()，它是树的顶部。如果您在树中向上走了很远，以至于要在 NullInjector() 中寻找服务，那么除非使用 @Optional()，否则将收到错误消息，因为最终所有东西都将以 NullInjector() 结束并返回错误，或者对于 @Optional()，返回 null。有关 @Optional() 的更多信息，请参见本指南的 @Optional() 部分 。

The next parent injector in the hierarchy is the NullInjector(), which is the top of the tree. If you've gone so far up the tree that you are looking for a service in the NullInjector(), you'll get an error unless you've used @Optional() because ultimately, everything ends at the NullInjector() and it returns an error or, in the case of @Optional(), null. For more information on @Optional(), see the @Optional() section of this guide.

下图展示了前面各段落描述的 root ModuleInjector 及其父注入器之间的关系。

The following diagram represents the relationship between the root ModuleInjector and its parent injectors as the previous paragraphs describe.

虽然 root 是一个特殊的别名，但其他 ModuleInjector 都没有别名。每当创建动态加载组件时，你还会创建 ModuleInjector，比如路由器，它还会创建子 ModuleInjector。

While the name root is a special alias, other ModuleInjectors don't have aliases. You have the option to create ModuleInjectors whenever a dynamically loaded component is created, such as with the Router, which will create child ModuleInjectors.

无论是使用 bootstrapModule() 的方法配置它，还是将所有提供者都用 root 注册到其自己的服务中，所有请求最终都会转发到 root 注入器。

All requests forward up to the root injector, whether you configured it with the bootstrapModule() method, or registered all providers with root in their own services.

      
        content_copy
      
      providers: [
  { provide: LocationStrategy, useClass: HashLocationStrategy }
]
    

ElementInjectorlink

Angular 会为每个 DOM 元素隐式创建 ElementInjector 。

Angular creates ElementInjectors implicitly for each DOM element.

可以用 @Component() 装饰器中的 providers 或 viewProviders 属性来配置 ElementInjector 以提供服务。例如，下面的 TestComponent 通过提供此服务来配置 ElementInjector：

Providing a service in the @Component() decorator using its providers or viewProviders property configures an ElementInjector. For example, the following TestComponent configures the ElementInjector by providing the service as follows:

      
        content_copy
      
      @Component({
  ...
  providers: [{ provide: ItemService, useValue: { name: 'lamp' } }]
})
export class TestComponent
    

在组件中提供服务时，可以通过 ElementInjector 在该组件实例处使用该服务。根据解析规则部分描述的可见性规则，它也同样在子组件/指令处可见。

When you provide services in a component, that service is available via the ElementInjector at that component instance. It may also be visible at child component/directives based on visibility rules described in the resolution rules section.

当组件实例被销毁时，该服务实例也将被销毁。

When the component instance is destroyed, so is that service instance.

@Directive() 和 @Component()link

@Directive() and @Component()link

组件是一种特殊类型的指令，这意味着 @Directive() 具有 providers 属性，@Component() 也同样如此。 这意味着指令和组件都可以使用 providers 属性来配置提供者。当使用 providers 属性为组件或指令配置提供者时，该提供程商就属于该组件或指令的 ElementInjector。同一元素上的组件和指令共享同一个注入器。

A component is a special type of directive, which means that just as @Directive() has a providers property, @Component() does too. This means that directives as well as components can configure providers, using the providers property. When you configure a provider for a component or directive using the providers property, that provider belongs to the ElementInjector of that component or directive. Components and directives on the same element share an injector.

解析规则link

Resolution ruleslink

当为组件/指令解析令牌时，Angular 分为两个阶段来解析它：

When resolving a token for a component/directive, Angular resolves it in two phases:

1. 针对 ElementInjector 层次结构（其父级）

   Against the ElementInjector hierarchy (its parents)

2. 针对 ModuleInjector 层次结构（其父级）

   Against the ModuleInjector hierarchy (its parents)

当组件声明依赖项时，Angular 会尝试使用它自己的 ElementInjector 来满足该依赖。 如果组件的注入器缺少提供者，它将把请求传给其父组件的 ElementInjector 。

When a component declares a dependency, Angular tries to satisfy that dependency with its own ElementInjector. If the component's injector lacks the provider, it passes the request up to its parent component's ElementInjector.

这些请求将继续转发，直到 Angular 找到可以处理该请求的注入器或用完祖先 ElementInjector 。

The requests keep forwarding up until Angular finds an injector that can handle the request or runs out of ancestor ElementInjectors.

如果 Angular 在任何 ElementInjector 中都找不到提供者，它将返回到发起请求的元素，并在 ModuleInjector 层次结构中进行查找。如果 Angular 仍然找不到提供者，它将引发错误。

If Angular doesn't find the provider in any ElementInjectors, it goes back to the element where the request originated and looks in the ModuleInjector hierarchy. If Angular still doesn't find the provider, it throws an error.

如果您已在不同级别注册了相同 DI 令牌的提供者，则 Angular 会用遇到的第一个来解析该依赖。例如，如果提供者已经在需要此服务的组件中本地注册了，则 Angular 不会再寻找同一服务的其他提供者。

If you have registered a provider for the same DI token at different levels, the first one Angular encounters is the one it uses to resolve the dependency. If, for example, a provider is registered locally in the component that needs a service, Angular doesn't look for another provider of the same service.

解析修饰符link

Resolution modifierslink

可以使用 @Optional()，@Self()，@SkipSelf() 和 @Host() 来修饰 Angular 的解析行为。从 @angular/core 导入它们，并在注入服务时在组件类构造函数中使用它们。

Angular's resolution behavior can be modified with @Optional(), @Self(), @SkipSelf() and @Host(). Import each of them from @angular/core and use each in the component class constructor when you inject your service.

有关展示本节介绍的解析修饰符的可运行应用，请参阅解析修饰符范例解析修饰符范例 / 下载范例。

For a working app showcasing the resolution modifiers that this section covers, see theresolution modifiers exampleresolution modifiers example / 下载范例.

修饰符的类型link

Types of modifierslink

解析修饰符分为三类：

Resolution modifiers fall into three categories:

1. 如果 Angular 找不到您要的东西该怎么办，用 @Optional()

   What to do if Angular doesn't find what you're looking for, that is @Optional()

2. 从哪里开始寻找，用 @SkipSelf()

   Where to start looking, that is @SkipSelf()

3. 到哪里停止寻找，用 @Host() 和 @Self()

   Where to stop looking, @Host() and @Self()

默认情况下，Angular 始终从当前的 Injector 开始，并一直向上搜索。修饰符使您可以更改开始（默认是自己）或结束位置。

By default, Angular always starts at the current Injector and keeps searching all the way up. Modifiers allow you to change the starting (self) or ending location.

另外，您可以组合除 @Host() 和 @Self() 之外的所有修饰符，当然还有 @SkipSelf() 和 @Self() 。

Additionally, you can combine all of the modifiers except @Host() and @Self() and of course @SkipSelf() and @Self().

@Optional()link

@Optional() 允许 Angular 将您注入的服务视为可选服务。这样，如果无法在运行时解析它，Angular 只会将服务解析为 null，而不会抛出错误。在下面的示例中，服务 OptionalService 没有在 @NgModule() 或组件类中提供，所以它没有在应用中的任何地方。

@Optional() allows Angular to consider a service you inject to be optional. This way, if it can't be resolved at runtime, Angular simply resolves the service as null, rather than throwing an error. In the following example, the service, OptionalService, isn't provided in the service, @NgModule(), or component class, so it isn't available anywhere in the app.

      
        content_copy
      
      export class OptionalComponent {
  constructor(@Optional() public optional: OptionalService) {}
}
    

@Self()link

使用 @Self() 让 Angular 仅查看当前组件或指令的 ElementInjector 。

Use @Self() so that Angular will only look at the ElementInjector for the current component or directive.

@Self() 的一个好例子是要注入某个服务，但只有当该服务在当前宿主元素上可用时才行。为了避免这种情况下出错，请将 @Self() 与 @Optional() 结合使用。

A good use case for @Self() is to inject a service but only if it is available on the current host element. To avoid errors in this situation, combine @Self() with @Optional().

例如，在下面的 SelfComponent 中。请注意在构造函数中注入的 LeafService。

For example, in the following SelfComponent, notice the injected LeafService in the constructor.

      
        content_copy
      
      @Component({
  selector: 'app-self-no-data',
  templateUrl: './self-no-data.component.html',
  styleUrls: ['./self-no-data.component.css']
})
export class SelfNoDataComponent {
  constructor(@Self() @Optional() public leaf: LeafService) { }
}
    

在这个例子中，有一个父提供者，注入服务将返回该值，但是，使用 @Self() 和 @Optional() 注入的服务将返回 null 因为 @Self() 告诉注入器在当前宿主元素上就要停止搜索。

In this example, there is a parent provider and injecting the service will return the value, however, injecting the service with @Self() and @Optional() will return null because @Self() tells the injector to stop searching in the current host element.

另一个示例显示了具有 FlowerService 提供者的组件类。在这个例子中，注入器没有超出当前 ElementInjector 就停止了，因为它已经找到了 FlowerService 并返回了黄色花朵🌼。

Another example shows the component class with a provider for FlowerService. In this case, the injector looks no further than the current ElementInjector because it finds the FlowerService and returns the yellow flower 🌼.

      
        content_copy
      
      @Component({
  selector: 'app-self',
  templateUrl: './self.component.html',
  styleUrls: ['./self.component.css'],
  providers: [{ provide: FlowerService, useValue: { emoji: '🌼' } }]

})
export class SelfComponent {
  constructor(@Self() public flower: FlowerService) {}
}
    

@SkipSelf()link

@SkipSelf() 与 @Self() 相反。使用 @SkipSelf() ，Angular 在父 ElementInjector 中而不是当前 ElementInjector 中开始搜索服务。因此，如果父 ElementInjector 对 emoji 使用了值 🌿（蕨类），但组件的 providers 数组中有 🍁（枫叶），则 Angular 将忽略 🍁（枫叶），而使用 🌿（蕨类）。

@SkipSelf() is the opposite of @Self(). With @SkipSelf(), Angular starts its search for a service in the parent ElementInjector, rather than in the current one. So if the parent ElementInjector were using the value 🌿 (fern) for emoji , but you had 🍁 (maple leaf) in the component's providers array, Angular would ignore 🍁 (maple leaf) and use 🌿 (fern).

要在代码中看到这一点，请先假定 emoji 的以下值就是父组件正在使用的值，如本服务所示：

To see this in code, assume that the following value for emoji is what the parent component were using, as in this service:

      
        content_copy
      
      export class LeafService {
  emoji = '🌿';
}
    

想象一下，在子组件中，您有一个不同的值 🍁（枫叶），但您想使用父项的值。你就要使用 @SkipSelf() ：

Imagine that in the child component, you had a different value, 🍁 (maple leaf) but you wanted to use the parent's value instead. This is when you'd use @SkipSelf():

      
        content_copy
      
      @Component({
  selector: 'app-skipself',
  templateUrl: './skipself.component.html',
  styleUrls: ['./skipself.component.css'],
  // Angular would ignore this LeafService instance
  providers: [{ provide: LeafService, useValue: { emoji: '🍁' } }]
})
export class SkipselfComponent {
  // Use @SkipSelf() in the constructor
  constructor(@SkipSelf() public leaf: LeafService) { }
}
    

在这个例子中，您获得的 emoji 值将为 🌿（蕨类），而不是 🍁（枫叶）。

In this case, the value you'd get for emoji would be 🌿 (fern), not 🍁 (maple leaf).

@SkipSelf() with @Optional()link

如果值为 null 请同时使用 @SkipSelf() 和 @Optional() 来防止错误。在下面的示例中，将 Person 服务注入到构造函数中。@SkipSelf() 告诉 Angular 跳过当前的注入器，如果 Person 服务为 null，则 @Optional() 将防止报错。

Use @SkipSelf() with @Optional() to prevent an error if the value is null. In the following example, the Person service is injected in the constructor. @SkipSelf() tells Angular to skip the current injector and @Optional() will prevent an error should the Person service be null.

      
        content_copy
      
      class Person {
  constructor(@Optional() @SkipSelf() parent: Person) {}
}
    

@Host()link

@Host() 使您可以在搜索提供者时将当前组件指定为注入器树的最后一站。即使树的更上级有一个服务实例，Angular 也不会继续寻找。使用 @Host() 的例子如下：

@Host() lets you designate a component as the last stop in the injector tree when searching for providers. Even if there is a service instance further up the tree, Angular won't continue looking. Use @Host() as follows:

      
        content_copy
      
      @Component({
  selector: 'app-host',
  templateUrl: './host.component.html',
  styleUrls: ['./host.component.css'],
  //  provide the service
  providers: [{ provide: FlowerService, useValue: { emoji: '🌼' } }]
})
export class HostComponent {
  // use @Host() in the constructor when injecting the service
  constructor(@Host() @Optional() public flower: FlowerService) { }

}
    

由于 HostComponent 在其构造函数中具有 @Host() ，因此，无论 HostComponent 的父级是否可能有 flower.emoji 值，该 HostComponent 都将使用 🌼（黄色花朵）。

Since HostComponent has @Host() in its constructor, no matter what the parent of HostComponent might have as a flower.emoji value, the HostComponent will use 🌼 (yellow flower).

模板的逻辑结构link

Logical structure of the templatelink

在组件类中提供服务时，服务在 ElementInjector 树中的可见性是取决于您在何处以及如何提供这些服务。

When you provide services in the component class, services are visible within the ElementInjector tree relative to where and how you provide those services.

了解 Angular 模板的基础逻辑结构将为您配置服务并进而控制其可见性奠定基础。

Understanding the underlying logical structure of the Angular template will give you a foundation for configuring services and in turn control their visibility.

组件在模板中使用，如以下示例所示：

Components are used in your templates, as in the following example:

      
        content_copy
      
      <app-root>
    <app-child></app-child>
</app-root>
    

下面是如何将 <app-root> 和 <app-child> 视图树组合为单个逻辑树的示例：

The following is an example of how the <app-root> and <app-child> view trees are combined into a single logical tree:

      
        content_copy
      
      <app-root>
  <#VIEW>
    <app-child>
     <#VIEW>
       ...content goes here...
     </#VIEW>
    </app-child>
  <#VIEW>
</app-root>
    

当您在组件类中配置服务时，了解这种 <#VIEW> 划界的思想尤其重要。

Understanding the idea of the <#VIEW> demarcation is especially significant when you configure services in the component class.

在 @Component() 中提供服务link

Providing services in @Component()link

您如何通过 @Component() （或 @Directive() ）装饰器提供服务决定了它们的可见性。以下各节演示了 providers 和 viewProviders 以及使用 @SkipSelf() 和 @Host() 修改服务可见性的方法。

How you provide services via an @Component() (or @Directive()) decorator determines their visibility. The following sections demonstrate providers and viewProviders along with ways to modify service visibility with @SkipSelf() and @Host().

组件类可以通过两种方式提供服务：

A component class can provide services in two ways:

1. 使用 providers 数组

   with a providers array

      
        content_copy
      
      @Component({
  ...
  providers: [
    {provide: FlowerService, useValue: {emoji: '🌺'}}
  ]
})
    

2. 使用 viewProviders 数组

   with a viewProviders array

      
        content_copy
      
      @Component({
  ...
  viewProviders: [
    {provide: AnimalService, useValue: {emoji: '🐶'}}
  ]
})
    

为了解 providers 和 viewProviders 对服务可见性的影响有何差异，以下各节将逐步构建一个现场演练 / 下载范例并在代码和逻辑树中比较 providers 和 viewProviders 的作用。

To understand how the providers and viewProviders influence service visibility differently, the following sections build a现场演练 / 下载范例step-by-step and compare the use of providers and viewProviders in code and a logical tree.

应用程序结构示例link

Example app structurelink

示例应用程序的 root 提供了 FlowerService，其 emoji 值为 🌺（红色芙蓉）。

The example app has a FlowerService provided in root with an emoji value of 🌺 (red hibiscus).

      
        content_copy
      
      @Injectable({
  providedIn: 'root'
})
export class FlowerService {
  emoji = '🌺';
}
    

考虑一个只有 AppComponent 和 ChildComponent 的简单应用程序。最基本的渲染视图看起来就像嵌套的 HTML 元素，例如：

Consider a simple app with only an AppComponent and a ChildComponent. The most basic rendered view would look like nested HTML elements such as the following:

      
        content_copy
      
      <app-root> <!-- AppComponent selector -->
    <app-child> <!-- ChildComponent selector -->
    </app-child>
</app-root>
    

但是，在幕后，Angular 在解析注入请求时使用如下逻辑视图表示形式：

However, behind the scenes, Angular uses a logical view representation as follows when resolving injection requests:

      
        content_copy
      
      <app-root> <!-- AppComponent selector -->
    <#VIEW>
        <app-child> <!-- ChildComponent selector -->
            <#VIEW>
            </#VIEW>
        </app-child>
    </#VIEW>
</app-root>
    

此处的 <#VIEW> 表示模板的实例。请注意，每个组件都有自己的 <#VIEW> 。

The <#VIEW> here represents an instance of a template. Notice that each component has its own <#VIEW>.

了解此结构可以告知您如何提供和注入服务，并完全控制服务的可见性。

Knowledge of this structure can inform how you provide and inject your services, and give you complete control of service visibility.

现在，考虑 <app-root> 只注入了 FlowerService ：

Now, consider that <app-root> simply injects the FlowerService:

      
        content_copy
      
      export class AppComponent  {
  constructor(public flower: FlowerService) {}
}
    

将绑定添加到 <app-root> 模板来将结果可视化：

Add a binding to the <app-root> template to visualize the result:

      
        content_copy
      
      <p>Emoji from FlowerService: {{flower.emoji}}</p>
    

该视图中的输出为：

The output in the view would be:

      
        content_copy
      
      Emoji from FlowerService: 🌺
    

在逻辑树中，这可以表示成如下形式：

In the logical tree, this would be represented as follows:

      
        content_copy
      
      <app-root @NgModule(AppModule)
        @Inject(FlowerService) flower=>"🌺">
  <#VIEW>

    <p>Emoji from FlowerService: {{flower.emoji}} (🌺)</p>

    <app-child>
      <#VIEW>
      </#VIEW>
     </app-child>
  </#VIEW>
</app-root>
    

当 <app-root> 请求 FlowerService 时，注入器的工作就是解析 FlowerService 令牌。令牌的解析分为两个阶段：

When <app-root> requests the FlowerService, it is the injector's job to resolve the FlowerService token. The resolution of the token happens in two phases:

1. 注入器确定逻辑树中搜索的开始位置和结束位置。注入程序从起始位置开始，并在逻辑树的每个级别上查找令牌。如果找到令牌，则将其返回。

   The injector determines the starting location in the logical tree and an ending location of the search. The injector begins with the starting location and looks for the token at each level in the logical tree. If the token is found it is returned.

2. 如果未找到令牌，则注入程序将寻找最接近的父 @NgModule() 委派该请求。

   If the token is not found, the injector looks for the closest parent @NgModule() to delegate the request to.

在这个例子中，约束为：

In the example case, the constraints are:

1. 从属于 <app-root> 的 <#VIEW> 开始，并结束于 <app-root> 。

   Start with <#VIEW> belonging to <app-root> and end with <app-root>.

• 通常，搜索的起点就是注入点。但是，在这个例子中，<app-root> @Component 的特殊之处在于它们还包括自己的 viewProviders，这就是为什么搜索从 <app-root> 的 <#VIEW> 开始的原因。（对于匹配同一位置的指令，情况却并非如此）。

  Normally the starting point for search is at the point of injection. However, in this case <app-root> @Components are special in that they also include their own viewProviders, which is why the search starts at <#VIEW> belonging to <app-root>. (This would not be the case for a directive matched at the same location).

• 结束位置恰好与组件本身相同，因为它就是此应用程序中最顶层的组件。

  The ending location just happens to be the same as the component itself, because it is the topmost component in this application.

2. 当在 ElementInjector 中找不到注入令牌时，就用 AppModule 充当后备注入器。

   The AppModule acts as the fallback injector when the injection token can't be found in the ElementInjectors.

使用 providers 数组link

Using the providers arraylink

现在，在 ChildComponent 类中，为 FlowerService 添加一个提供者，以便在接下来的小节中演示更复杂的解析规则：

Now, in the ChildComponent class, add a provider for FlowerService to demonstrate more complex resolution rules in the upcoming sections:

      
        content_copy
      
      @Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css'],
  // use the providers array to provide a service
  providers: [{ provide: FlowerService, useValue: { emoji: '🌻' } }]
})

export class ChildComponent {
  // inject the service
  constructor( public flower: FlowerService) { }
}
    

现在，在 @Component() 装饰器中提供了 FlowerService ，当 <app-child> 请求该服务时，注入器仅需要查找 <app-child> 自己的 ElementInjector 。不必再通过注入器树继续搜索。

Now that the FlowerService is provided in the @Component() decorator, when the <app-child> requests the service, the injector has only to look as far as the <app-child>'s own ElementInjector. It won't have to continue the search any further through the injector tree.

下一步是将绑定添加到 ChildComponent 模板。

The next step is to add a binding to the ChildComponent template.

      
        content_copy
      
      <p>Emoji from FlowerService: {{flower.emoji}}</p>
    

要渲染新的值，请在 AppComponent 模板的底部添加 <app-child> ，以便其视图也显示向日葵：

To render the new values, add <app-child> to the bottom of the AppComponent template so the view also displays the sunflower:

      
        content_copy
      
      Child Component
Emoji from FlowerService: 🌻
    

在逻辑树中，可以把它表示成这样：

In the logical tree, this would be represented as follows:

      
        content_copy
      
      <app-root @NgModule(AppModule)
        @Inject(FlowerService) flower=>"🌺">
  <#VIEW>

    <p>Emoji from FlowerService: {{flower.emoji}} (🌺)</p>

    <app-child @Provide(FlowerService="🌻")
               @Inject(FlowerService)=>"🌻"> <!-- search ends here -->
      <#VIEW> <!-- search starts here -->

        <h2>Parent Component</h2>

        <p>Emoji from FlowerService: {{flower.emoji}} (🌻)</p>

      </#VIEW>
     </app-child>
  </#VIEW>
</app-root>
    

当 <app-child> 请求 FlowerService 时，注入器从 <app-child> 的 <#VIEW> 开始搜索（包括 <#VIEW> ，因为它是从 @Component() 注入的），并到 <app-child> 结束。在这个例子中， FlowerService 在 <app-child> 的 providers 数组中解析为向日葵🌻。注入器不必在注入器树中进一步查找。一旦找到 FlowerService ，它便停止运行，再也看不到🌺（红芙蓉）。

When <app-child> requests the FlowerService, the injector begins its search at the <#VIEW> belonging to <app-child> (<#VIEW> is included because it is injected from @Component()) and ends with <app-child>. In this case, the FlowerService is resolved in the <app-child>'s providers array with sunflower 🌻. The injector doesn't have to look any further in the injector tree. It stops as soon as it finds the FlowerService and never sees the 🌺 (red hibiscus).

使用 viewProviders 数组link

Using the viewProviders arraylink

使用 viewProviders 数组是在 @Component() 装饰器中提供服务的另一种方法。使用 viewProviders 使服务在 <#VIEW> 中可见。

Use the viewProviders array as another way to provide services in the @Component() decorator. Using viewProviders makes services visible in the <#VIEW>.

该示例应用程序具有第二个服务 AnimalService 来演示 viewProviders 。

The example app features a second service, the AnimalService to demonstrate viewProviders.

首先，创建一个 AnimalService 与 emoji 的🐳（鲸鱼）属性：

First, create an AnimalService with an emoji property of 🐳 (whale):

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

@Injectable({
  providedIn: 'root'
})
export class AnimalService {
  emoji = '🐳';
}
    

遵循与 FlowerService 相同的模式，将 AnimalService 注入 AppComponent 类：

Following the same pattern as with the FlowerService, inject the AnimalService in the AppComponent class:

      
        content_copy
      
      export class AppComponent  {
  constructor(public flower: FlowerService, public animal: AnimalService) {}
}
    

添加一个 viewProviders 数组，并将 AnimalService 也注入到 <app-child> 类中，但是给 emoji 一个不同的值。在这里，它的值为🐶（小狗）。

Add a viewProviders array and inject the AnimalService in the <app-child> class, too, but give emoji a different value. Here, it has a value of 🐶 (puppy).

      
        content_copy
      
      @Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css'],
  // provide services
  providers: [{ provide: FlowerService, useValue: { emoji: '🌻' } }],
  viewProviders: [{ provide: AnimalService, useValue: { emoji: '🐶' } }]
})

export class ChildComponent {
  // inject service
  constructor( public flower: FlowerService, public animal: AnimalService) { }
}
    

将绑定添加到 ChildComponent 和 AppComponent 模板。在 ChildComponent 模板中，添加以下绑定：

Add bindings to the ChildComponent and the AppComponent templates. In the ChildComponent template, add the following binding:

      
        content_copy
      
      <p>Emoji from AnimalService: {{animal.emoji}}</p>
    

此外，将其添加到 AppComponent 模板：

Additionally, add the same to the AppComponent template:

      
        content_copy
      
      <p>Emoji from AnimalService: {{animal.emoji}}</p>
    

现在，您应该在浏览器中看到两个值：

Now you should see both values in the browser:

      
        content_copy
      
      AppComponent
Emoji from AnimalService: 🐳

Child Component
Emoji from AnimalService: 🐶
    

此 viewProviders 示例的逻辑树如下：

The logic tree for this example of viewProviders is as follows:

      
        content_copy
      
      <app-root @NgModule(AppModule)
        @Inject(AnimalService) animal=>"🐳">
  <#VIEW>
    <app-child>
      <#VIEW
       @Provide(AnimalService="🐶")
       @Inject(AnimalService=>"🐶")>

       <!-- ^^using viewProviders means AnimalService is available in <#VIEW>-->

       <p>Emoji from AnimalService: {{animal.emoji}} (🐶)</p>

      </#VIEW>
     </app-child>
  </#VIEW>
</app-root>
    

与 FlowerService 示例一样， <app-child> @Component() 装饰器中提供了 AnimalService。这意味着，由于注入器首先在组件的 ElementInjector 中查找，因此它将找到 AnimalService 的值 🐶（小狗）。它不需要继续搜索 ElementInjector 树，也不需要搜索 ModuleInjector 。

Just as with the FlowerService example, the AnimalService is provided in the <app-child> @Component() decorator. This means that since the injector first looks in the ElementInjector of the component, it finds the AnimalService value of 🐶 (puppy). It doesn't need to continue searching the ElementInjector tree, nor does it need to search the ModuleInjector.

providers 与 viewProviderslink

providers vs. viewProviderslink

为了看清 providers 和 viewProviders 的差异，请在示例中添加另一个组件，并将其命名为 InspectorComponent 。 InspectorComponent 将是 ChildComponent 的子 ChildComponent 。在 inspector.component.ts 中，将 FlowerService 和 AnimalService 注入构造函数中：

To see the difference between using providers and viewProviders, add another component to the example and call it InspectorComponent. InspectorComponent will be a child of the ChildComponent. In inspector.component.ts, inject the FlowerService and AnimalService in the constructor:

      
        content_copy
      
      export class InspectorComponent {
  constructor(public flower: FlowerService, public animal: AnimalService) { }
}
    

您不需要 providers 或 viewProviders 数组。接下来，在 inspector.component.html 中，从以前的组件中添加相同的 html：

You do not need a providers or viewProviders array. Next, in inspector.component.html, add the same markup from previous components:

      
        content_copy
      
      <p>Emoji from FlowerService: {{flower.emoji}}</p>
<p>Emoji from AnimalService: {{animal.emoji}}</p>
    

别忘了将 InspectorComponent 添加到 AppModule declarations 数组。

Remember to add the InspectorComponent to the AppModule declarations array.

      
        content_copy
      
      @NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, ChildComponent, InspectorComponent ],
  bootstrap:    [ AppComponent ],
  providers: []
})
export class AppModule { }
    

接下来，确保您的 child.component.html 包含以下内容：

Next, make sure your child.component.html contains the following:

      
        content_copy
      
      <p>Emoji from FlowerService: {{flower.emoji}}</p>
<p>Emoji from AnimalService: {{animal.emoji}}</p>

<div class="container">
  <h3>Content projection</h3>
	<ng-content></ng-content>
</div>

<h3>Inside the view</h3>
<app-inspector></app-inspector>
    

前两行带有绑定，来自之前的步骤。新的部分是 <ng-content> 和 <app-inspector>。 <ng-content> 允许您投影内容， ChildComponent 模板中的 <app-inspector> 使 InspectorComponent 成为 ChildComponent 的子组件。

The first two lines, with the bindings, are there from previous steps. The new parts are <ng-content> and <app-inspector>. <ng-content> allows you to project content, and <app-inspector> inside the ChildComponent template makes the InspectorComponent a child component of ChildComponent.

接下来，将以下内容添加到 app.component.html 中以利用内容投影的优势。

Next, add the following to app.component.html to take advantage of content projection.

      
        content_copy
      
      <app-child><app-inspector></app-inspector></app-child>
    

现在，浏览器将呈现以下内容，为简洁起见，省略了前面的示例：

The browser now renders the following, omitting the previous examples for brevity:

      
        content_copy
      
      //...Omitting previous examples. The following applies to this section.

Content projection: This is coming from content. Doesn't get to see
puppy because the puppy is declared inside the view only.

Emoji from FlowerService: 🌻
Emoji from AnimalService: 🐳

Emoji from FlowerService: 🌻
Emoji from AnimalService: 🐶
    

这四个绑定说明了 providers 和 viewProviders 之间的区别。由于🐶（小狗）在<#VIEW>中声明，因此投影内容不可见。投影的内容中会看到🐳（鲸鱼）。

These four bindings demonstrate the difference between providers and viewProviders. Since the 🐶 (puppy) is declared inside the <#VIEW>, it isn't visible to the projected content. Instead, the projected content sees the 🐳 (whale).

但是下一部分， InspectorComponent 是 ChildComponent 的子组件， InspectorComponent 在 <#VIEW> 内部，因此当它请求 AnimalService 时，它会看到🐶（小狗）。

The next section though, where InspectorComponent is a child component of ChildComponent, InspectorComponent is inside the <#VIEW>, so when it asks for the AnimalService, it sees the 🐶 (puppy).

逻辑树中的 AnimalService 如下所示：

The AnimalService in the logical tree would look like this:

      
        content_copy
      
      <app-root @NgModule(AppModule)
        @Inject(AnimalService) animal=>"🐳">
  <#VIEW>
    <app-child>
      <#VIEW
       @Provide(AnimalService="🐶")
       @Inject(AnimalService=>"🐶")>

       <!-- ^^using viewProviders means AnimalService is available in <#VIEW>-->

       <p>Emoji from AnimalService: {{animal.emoji}} (🐶)</p>

       <app-inspector>

        <p>Emoji from AnimalService: {{animal.emoji}} (🐶)</p>

       </app-inspector>
      </#VIEW>
      <app-inspector>
        <#VIEW>

          <p>Emoji from AnimalService: {{animal.emoji}} (🐳)</p>

        </#VIEW>
      </app-inspector>
     </app-child>
  </#VIEW>
</app-root>
    

<app-inspector> 的投影内容中看到了🐳（鲸鱼），而不是🐶（小狗），因为🐶（小狗）在 <app-child> 的 <#VIEW> 中。如果 <app-inspector> 也位于 <#VIEW> 则只能看到🐶（小狗）。

The projected content of <app-inspector> sees the 🐳 (whale), not the 🐶 (puppy), because the 🐶 (puppy) is inside the <app-child> <#VIEW>. The <app-inspector> can only see the 🐶 (puppy) if it is also within the <#VIEW>.

修改服务可见性link

Modifying service visibilitylink

本节讲的是如何使用可见性修饰符 @Host() ， @Self() 和 @SkipSelf() 来限制 ElementInjector 的开始和结束范围。

This section describes how to limit the scope of the beginning and ending ElementInjector using the visibility decorators @Host(), @Self(), and @SkipSelf().

提供者令牌的可见性link

Visibility of provided tokenslink

可见性装饰器影响搜索注入令牌时在逻辑树中开始和结束的位置。为此，要将可见性装饰器放置在注入点，即 constructor() ，而不是在声明点。

Visibility decorators influence where the search for the injection token begins and ends in the logic tree. To do this, place visibility decorators at the point of injection, that is, the constructor(), rather than at a point of declaration.

为了修改该注入器从哪里开始寻找 FlowerService，把 @SkipSelf() 加到 <app-child> 的 @Inject 声明 FlowerService 中。该声明在 <app-child> 构造函数中，如 child.component.ts 所示：

To alter where the injector starts looking for FlowerService, add @SkipSelf() to the <app-child> @Inject declaration for the FlowerService. This declaration is in the <app-child> constructor as shown in child.component.ts:

      
        content_copy
      
      constructor(@SkipSelf() public flower : FlowerService) { }
    

使用 @SkipSelf()，<app-child> 注入器不会寻找自身来获取 FlowerService。相反，喷射器开始在 <app-root> 的 ElementInjector 中寻找 FlowerService，在那里它什么也没找到。 然后，它返回到 <app-child> 的 ModuleInjector 并找到🌺（红芙蓉）值，这是可用的，因为 <app-child> ModuleInjector 和 <app-root> ModuleInjector 被展开成了一个 ModuleInjector 。因此，UI 将呈现以下内容：

With @SkipSelf(), the <app-child> injector doesn't look to itself for the FlowerService. Instead, the injector starts looking for the FlowerService at the <app-root>'s ElementInjector, where it finds nothing. Then, it goes back to the <app-child> ModuleInjector and finds the 🌺 (red hibiscus) value, which is available because the <app-child> ModuleInjector and the <app-root> ModuleInjector are flattened into one ModuleInjector. Thus, the UI renders the following:

      
        content_copy
      
      Emoji from FlowerService: 🌺
    

在逻辑树中，这种情况可能如下所示：

In a logical tree, this same idea might look like this:

      
        content_copy
      
      <app-root @NgModule(AppModule)
        @Inject(FlowerService) flower=>"🌺">
  <#VIEW>
    <app-child @Provide(FlowerService="🌻")>
      <#VIEW @Inject(FlowerService, SkipSelf)=>"🌺">

      <!-- With SkipSelf, the injector looks to the next injector up the tree -->

      </#VIEW>
      </app-child>
  </#VIEW>
</app-root>
    

尽管 <app-child> 提供了🌻（向日葵），但该应用程序渲染了🌺（红色芙蓉），因为 @SkipSelf() 导致当前的注入器跳过了自身并寻找其父级。

Though <app-child> provides the 🌻 (sunflower), the app renders the 🌺 (red hibiscus) because @SkipSelf() causes the current injector to skip itself and look to its parent.

如果现在将 @Host()（以及 @SkipSelf() ）添加到了 FlowerService 的 @Inject，其结果将为 null 。这是因为 @Host() 将搜索的上限限制为 <#VIEW> 。这是在逻辑树中的情况：

If you now add @Host() (in addition to the @SkipSelf()) to the @Inject of the FlowerService, the result will be null. This is because @Host() limits the upper bound of the search to the <#VIEW>. Here's the idea in the logical tree:

      
        content_copy
      
      <app-root @NgModule(AppModule)
        @Inject(FlowerService) flower=>"🌺">
  <#VIEW> <!-- end search here with null-->
    <app-child @Provide(FlowerService="🌻")> <!-- start search here -->
      <#VIEW @Inject(FlowerService, @SkipSelf, @Host, @Optional)=>null>
      </#VIEW>
      </app-parent>
  </#VIEW>
</app-root>
    

在这里，服务及其值是相同的，但是 @Host() 阻止了注入器对 FlowerService 进行任何高于 <#VIEW> 的查找，因此找不到它并返回 null 。

Here, the services and their values are the same, but @Host() stops the injector from looking any further than the <#VIEW> for FlowerService, so it doesn't find it and returns null.

@SkipSelf() 和 viewProviderslink

@SkipSelf() and viewProviderslink

该 <app-child> 目前提供在 viewProviders 数组中提供了值为 🐶（小狗）的 AnimalService。由于注入器只需要查看 <app-child> 的 ElementInjector 中的 AnimalService ，它就不会看到🐳（鲸鱼）。

The <app-child> currently provides the AnimalService in the viewProviders array with the value of 🐶 (puppy). Because the injector has only to look at the <app-child>'s ElementInjector for the AnimalService, it never sees the 🐳 (whale).

就像在 FlowerService 示例中一样，如果将 @SkipSelf() 添加到 AnimalService 的构造函数中，则注入器将不在 AnimalService 的当前 <app-child> 的 ElementInjector 中查找 AnimalService 。

Just as in the FlowerService example, if you add @SkipSelf() to the constructor for the AnimalService, the injector won't look in the current <app-child>'s ElementInjector for the AnimalService.

      
        content_copy
      
      export class ChildComponent {

// add @SkipSelf()
  constructor(@SkipSelf() public animal : AnimalService) { }

}
    

相反，注入器将从 <app-root> ElementInjector 开始找。请记住， <app-child> 类在 viewProviders 数组中 AnimalService 中提供了🐶（小狗）的值：

Instead, the injector will begin at the <app-root> ElementInjector. Remember that the <app-child> class provides the AnimalService in the viewProviders array with a value of 🐶 (puppy):

      
        content_copy
      
      @Component({
  selector: 'app-child',
  ...
  viewProviders:
  [{ provide: AnimalService, useValue: { emoji: '🐶' } }]
})
    

在 <app-child> 中使用 @SkipSelf() 的逻辑树是这样的：

The logical tree looks like this with @SkipSelf() in <app-child>:

      
        content_copy
      
      <app-root @NgModule(AppModule)
        @Inject(AnimalService=>"🐳")>
  <#VIEW><!-- search begins here -->
    <app-child>
      <#VIEW
       @Provide(AnimalService="🐶")
       @Inject(AnimalService, SkipSelf=>"🐳")>

       <!--Add @SkipSelf -->

      </#VIEW>
      </app-child>
  </#VIEW>
</app-root>
    

在 <app-child> 中使用 @SkipSelf()，注入器就会在 <app-root> 的 ElementInjector 中找到 🐳（鲸）。

With @SkipSelf() in the <app-child>, the injector begins its search for the AnimalService in the <app-root> ElementInjector and finds 🐳 (whale).

@Host() 和 viewProviderslink

@Host() and viewProviderslink

如果把 @Host() 添加到 AnimalService 的构造函数上，结果就是🐶（小狗），因为注入器会在 <app-child> 的 <#VIEW> 中查找 AnimalService 服务。这里是 <app-child> 类中的 viewProviders 数组和构造函数中的 @Host() ：

If you add @Host() to the constructor for AnimalService, the result is 🐶 (puppy) because the injector finds the AnimalService in the <app-child> <#VIEW>. Here is the viewProviders array in the <app-child> class and @Host() in the constructor:

      
        content_copy
      
      @Component({
  selector: 'app-child',
  ...
  viewProviders:
  [{ provide: AnimalService, useValue: { emoji: '🐶' } }]

})
export class ChildComponent {
  constructor(@Host() public animal : AnimalService) { }
}
    

@Host() 导致注入器开始查找，直到遇到 <#VIEW> 的边缘。

@Host() causes the injector to look until it encounters the edge of the <#VIEW>.

      
        content_copy
      
      <app-root @NgModule(AppModule)
        @Inject(AnimalService=>"🐳")>
  <#VIEW>
    <app-child>
      <#VIEW
       @Provide(AnimalService="🐶")
       @Inject(AnimalService, @Host=>"🐶")> <!-- @Host stops search here -->
      </#VIEW>
      </app-child>
  </#VIEW>
</app-root>
    

将带有第三个动物🦔（刺猬）的 viewProviders 数组添加到 app.component.ts 的 @Component() 元数据中：

Add a viewProviders array with a third animal, 🦔 (hedgehog), to the app.component.ts @Component() metadata:

      
        content_copy
      
      @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  viewProviders: [{ provide: AnimalService, useValue: { emoji: '🦔' } }]
})
    

接下来，同时把 @SkipSelf() 和 @Host() 加在 child.component.ts 中 AnimalService 的构造函数中。这是 <app-child> 构造函数中的 @Host() 和 @SkipSelf()：

Next, add @SkipSelf() along with @Host() to the constructor for the Animal Service in child.component.ts. Here are @Host() and @SkipSelf() in the <app-child> constructor :

      
        content_copy
      
      export class ChildComponent {

  constructor(
  @Host() @SkipSelf() public animal : AnimalService) { }

}
    

将 @Host() 和 SkipSelf() 应用于 providers 数组中的 FlowerService，结果为 null，因为 @SkipSelf() 会在 <app-child> 的注入器中开始搜索，但是 @Host() 要求它在 <#VIEW> 停止搜索 —— 没有 FlowerService 。在逻辑树中，您可以看到 FlowerService 在 <app-child> 中可见，而在 <#VIEW> 中不可见。

When @Host() and SkipSelf() were applied to the FlowerService, which is in the providers array, the result was null because @SkipSelf() starts its search in the <app-child> injector, but @Host() stops searching at <#VIEW>—where there is no FlowerService. In the logical tree, you can see that the FlowerService is visible in <app-child>, not its <#VIEW>.

不过，提供在 AppComponent 的 viewProviders 数组中的 AnimalService ，是可见的。

However, the AnimalService, which is provided in the AppComponent viewProviders array, is visible.

逻辑树表示法说明了为何如此：

The logical tree representation shows why this is:

      
        content_copy
      
      <app-root @NgModule(AppModule)
        @Inject(AnimalService=>"🐳")>
  <#VIEW @Provide(AnimalService="🦔")
         @Inject(AnimalService, @SkipSelf, @Host, @Optional)=>"🦔">

    <!-- ^^@SkipSelf() starts here,  @Host() stops here^^ -->

    <app-child>
      <#VIEW @Provide(AnimalService="🐶")
             @Inject(AnimalService, @SkipSelf, @Host, @Optional)=>"🐶">

               <!-- Add @SkipSelf ^^-->

      </#VIEW>
      </app-child>
  </#VIEW>
</app-root>
    

@SkipSelf() 导致注入器从 <app-root> 而不是 <app-child> 处开始对 AnimalService 进行搜索，而 @Host() 会在 <app-root> 的 <#VIEW> 处停止搜索。 由于 AnimalService 是通过 viewProviders 数组提供的，因此注入程序会在 <#VIEW> 找到🦔（刺猬）。

@SkipSelf(), causes the injector to start its search for the AnimalService at the <app-root>, not the <app-child>, where the request originates, and @Host() stops the search at the <app-root> <#VIEW>. Since AnimalService is provided via the viewProviders array, the injector finds 🦔 (hedgehog) in the <#VIEW>.

ElementInjector 用例示例link

ElementInjector use case exampleslink

在不同级别配置一个或多个提供者的能力开辟了很有用的可能性。要查看正在运行的应用中的以下情况，请参阅英雄示例英雄示例 / 下载范例。

The ability to configure one or more providers at different levels opens up useful possibilities. For a look at the following scenarios in a working app, see theheroes use case examplesheroes use case examples / 下载范例.

场景：服务隔离link

Scenario: service isolationlink

出于架构方面的考虑，可能会让你决定把一个服务限制到只能在它所属的那个应用域中访问。 比如，这个例子中包括一个用于显示反派列表的 VillainsListComponent，它会从 VillainsService 中获得反派列表数据。

Architectural reasons may lead you to restrict access to a service to the application domain where it belongs. For example, the guide sample includes a VillainsListComponent that displays a list of villains. It gets those villains from a VillainsService.

如果你在根模块 AppModule 中（也就是你注册 HeroesService 的地方）提供 VillainsService，就会让应用中的任何地方都能访问到 VillainsService，包括针对英雄的工作流。如果你稍后修改了 VillainsService，就可能破坏了英雄组件中的某些地方。在根模块 AppModule 中提供该服务将会引入此风险。

If you provided VillainsService in the root AppModule (where you registered the HeroesService), that would make the VillainsService visible everywhere in the application, including the Hero workflows. If you later modified the VillainsService, you could break something in a hero component somewhere.

该怎么做呢？你可以在 VillainsListComponent 的 providers 元数据中提供 VillainsService，就像这样：

Instead, you can provide the VillainsService in the providers metadata of the VillainsListComponent like this:

      
        content_copy
      
      @Component({
  selector: 'app-villains-list',
  templateUrl: './villains-list.component.html',
  providers: [ VillainsService ]
})
    

在 VillainsListComponent 的元数据中而不是其它地方提供 VillainsService 服务，该服务就会只在 VillainsListComponent 及其子组件树中可用。

By providing VillainsService in the VillainsListComponent metadata and nowhere else, the service becomes available only in the VillainsListComponent and its sub-component tree.

VillainService 对于 VillainsListComponent 来说是单例的，因为它就是在这里声明的。只要 VillainsListComponent 没有销毁，它就始终是 VillainService 的同一个实例。但是对于 VillainsListComponent 的多个实例，每个 VillainsListComponent 的实例都会有自己的 VillainService 实例。

VillainService is a singleton with respect to VillainsListComponent because that is where it is declared. As long as VillainsListComponent does not get destroyed it will be the same instance of VillainService but if there are multilple instances of VillainsListComponent, then each instance of VillainsListComponent will have its own instance of VillainService.

场景：多重编辑会话link

Scenario: multiple edit sessionslink

很多应用允许用户同时进行多个任务。 比如，在纳税申报应用中，申报人可以打开多个报税单，随时可能从一个切换到另一个。

Many applications allow users to work on several open tasks at the same time. For example, in a tax preparation application, the preparer could be working on several tax returns, switching from one to the other throughout the day.

本章要示范的场景仍然是基于《英雄指南》的。 想象一个外层的 HeroListComponent，它显示一个超级英雄的列表。

This guide demonstrates that scenario with an example in the Tour of Heroes theme. Imagine an outer HeroListComponent that displays a list of super heroes.

要打开一个英雄的报税单，申报者点击英雄名，它就会打开一个组件来编辑那个申报单。 每个选中的申报单都会在自己的组件中打开，并且可以同时打开多个申报单。

To open a hero's tax return, the preparer clicks on a hero name, which opens a component for editing that return. Each selected hero tax return opens in its own component and multiple returns can be open at the same time.

每个报税单组件都有下列特征：

Each tax return component has the following characteristics:

• 属于它自己的报税单会话。

  Is its own tax return editing session.

• 可以修改一个报税单，而不会影响另一个组件中的申报单。

  Can change a tax return without affecting a return in another component.

• 能把所做的修改保存到它的报税单中，或者放弃它们。

  Has the ability to save the changes to its tax return or cancel them.

假设 HeroTaxReturnComponent 还有一些管理并还原这些更改的逻辑。 这对于简单的报税单来说是很容易的。 不过，在现实世界中，报税单的数据模型非常复杂，对这些修改的管理可能不得不投机取巧。 你可以把这种管理任务委托给一个辅助服务，就像这个例子中所做的。

Suppose that the HeroTaxReturnComponent had logic to manage and restore changes. That would be a pretty easy task for a simple hero tax return. In the real world, with a rich tax return data model, the change management would be tricky. You could delegate that management to a helper service, as this example does.

报税单服务 HeroTaxReturnService 缓存了单条 HeroTaxReturn，用于跟踪那个申报单的变更，并且可以保存或还原它。 它还委托给了全应用级的单例服务 HeroService，它是通过依赖注入机制取得的。

The HeroTaxReturnService caches a single HeroTaxReturn, tracks changes to that return, and can save or restore it. It also delegates to the application-wide singleton HeroService, which it gets by injection.

      
        content_copy
      
      import { Injectable }    from '@angular/core';
import { HeroTaxReturn } from './hero';
import { HeroesService } from './heroes.service';

@Injectable()
export class HeroTaxReturnService {
  private currentTaxReturn: HeroTaxReturn;
  private originalTaxReturn: HeroTaxReturn;

  constructor(private heroService: HeroesService) { }

  set taxReturn (htr: HeroTaxReturn) {
    this.originalTaxReturn = htr;
    this.currentTaxReturn  = htr.clone();
  }

  get taxReturn (): HeroTaxReturn {
    return this.currentTaxReturn;
  }

  restoreTaxReturn() {
    this.taxReturn = this.originalTaxReturn;
  }

  saveTaxReturn() {
    this.taxReturn = this.currentTaxReturn;
    this.heroService.saveTaxReturn(this.currentTaxReturn).subscribe();
  }
}
    

下面是正在使用 HeroTaxReturnService 的 HeroTaxReturnComponent 组件。

Here is the HeroTaxReturnComponent that makes use of HeroTaxReturnService.

      
        content_copy
      
      import { Component, EventEmitter, Input, Output } from '@angular/core';
import { HeroTaxReturn }        from './hero';
import { HeroTaxReturnService } from './hero-tax-return.service';

@Component({
  selector: 'app-hero-tax-return',
  templateUrl: './hero-tax-return.component.html',
  styleUrls: [ './hero-tax-return.component.css' ],
  providers: [ HeroTaxReturnService ]
})
export class HeroTaxReturnComponent {
  message = '';

  @Output() close = new EventEmitter<void>();

  get taxReturn(): HeroTaxReturn {
    return this.heroTaxReturnService.taxReturn;
  }

  @Input()
  set taxReturn (htr: HeroTaxReturn) {
    this.heroTaxReturnService.taxReturn = htr;
  }

  constructor(private heroTaxReturnService: HeroTaxReturnService) { }

  onCanceled()  {
    this.flashMessage('Canceled');
    this.heroTaxReturnService.restoreTaxReturn();
  };

  onClose()  { this.close.emit(); };

  onSaved() {
    this.flashMessage('Saved');
    this.heroTaxReturnService.saveTaxReturn();
  }

  flashMessage(msg: string) {
    this.message = msg;
    setTimeout(() => this.message = '', 500);
  }
}
    

通过 @Input() 属性可以得到要编辑的报税单，这个属性被实现成了读取器（getter）和设置器（setter）。 设置器根据传进来的报税单初始化了组件自己的 HeroTaxReturnService 实例。 读取器总是返回该服务所存英雄的当前状态。 组件也会请求该服务来保存或还原这个报税单。

The tax-return-to-edit arrives via the @Input() property, which is implemented with getters and setters. The setter initializes the component's own instance of the HeroTaxReturnService with the incoming return. The getter always returns what that service says is the current state of the hero. The component also asks the service to save and restore this tax return.

但如果该服务是一个全应用范围的单例就不行了。 每个组件就都会共享同一个服务实例，每个组件也都会覆盖属于其他英雄的报税单。

This won't work if the service is an application-wide singleton. Every component would share the same service instance, and each component would overwrite the tax return that belonged to another hero.

要防止这一点，就要在 HeroTaxReturnComponent 元数据的 providers 属性中配置组件级的注入器，来提供该服务。

To prevent this, configure the component-level injector of HeroTaxReturnComponent to provide the service, using the providers property in the component metadata.

      
        content_copy
      
      providers: [ HeroTaxReturnService ]
    

HeroTaxReturnComponent 有它自己的 HeroTaxReturnService 提供者。 回忆一下，每个组件的实例都有它自己的注入器。 在组件级提供服务可以确保组件的每个实例都得到一个自己的、私有的服务实例，而报税单也不会再被意外覆盖了。

The HeroTaxReturnComponent has its own provider of the HeroTaxReturnService. Recall that every component instance has its own injector. Providing the service at the component level ensures that every instance of the component gets its own, private instance of the service, and no tax return gets overwritten.

场景：专门的提供者link

Scenario: specialized providerslink

在其它层级重新提供服务的另一个理由，是在组件树的深层中把该服务替换为一个更专门化的实现。

Another reason to re-provide a service at another level is to substitute a more specialized implementation of that service, deeper in the component tree.

考虑一个依赖于一系列服务的 Car 组件。 假设你在根注入器（代号 A）中配置了通用的提供者：CarService、EngineService 和 TiresService。

Consider a Car component that depends on several services. Suppose you configured the root injector (marked as A) with generic providers for CarService, EngineService and TiresService.

你创建了一个车辆组件（A），它显示一个从另外三个通用服务构造出的车辆。

You create a car component (A) that displays a car constructed from these three generic services.

然后，你创建一个子组件（B），它为 CarService 和 EngineService 定义了自己特有的提供者，它们具有适用于组件 B 的特有能力。

Then you create a child component (B) that defines its own, specialized providers for CarService and EngineService that have special capabilities suitable for whatever is going on in component (B).

组件 B 是另一个组件 C 的父组件，而组件 C 又定义了自己的，更特殊的CarService 提供者。

Component (B) is the parent of another component (C) that defines its own, even more specialized provider for CarService.

在幕后，每个组件都有自己的注入器，这个注入器带有为组件本身准备的 0 个、1 个或多个提供者。

Behind the scenes, each component sets up its own injector with zero, one, or more providers defined for that component itself.

当你在最深层的组件 C 解析 Car 的实例时，它使用注入器 C 解析生成了一个 Car 的实例，使用注入器 B 解析了 Engine，而 Tires 则是由根注入器 A 解析的。

When you resolve an instance of Car at the deepest component (C), its injector produces an instance of Car resolved by injector (C) with an Engine resolved by injector (B) and Tires resolved by the root injector (A).

关于依赖注入的更多知识link

More on dependency injectionlink

要了解关于 Angular 依赖注入的更多信息，参见 DI 提供者和 DI 实战 两章。

For more information on Angular dependency injection, see the DI Providers and DI in Action guides.