freeCodeCamp/guide/chinese/angular/dependency-injection/index.md

---
title: Dependency Injection
localeTitle: 依赖注入
---
# 依赖注入

#### 动机

依赖注入通常更简单地称为DI。范式存在于整个Angular中。它使代码保持灵活，可测试和可变。类可以在不知道如何创建外部逻辑的情况下继承外部逻辑。这些课程的任何消费者也不需要知道任何事情。

DI使得课程和消费者都不必知道必要的知识。然而，由于在Angular中支持DI的机制，代码与之前的模块一样。

服务是DI的关键恩人。他们依靠范式_注入_各种消费者。然后，那些消费者可以利用该服务在其他地方提供和/或转发。

服务并不孤单。指令，管道，组件等：Angular中的每个原理图都以某种方式从DI中受益。

#### 喷油器

注入器是存储指令的数据结构，详细说明服务的形式。它们充当Angular DI系统中的中间人。

模块，指令和组件类包含特定于注入器的元数据。每个类都附带一个新的注入器实例。通过这种方式，应用程序树可以镜像其注入器的层次结构。

`providers: []`元数据接受服务，然后向类注入器注册。此提供程序字段添加了进样器运行所需的指令。类（假设它具有依赖性）通过将其类作为其数据类型来实例化服务。注入器对齐此类型，代表该类创建该服务的实例。

当然，该类只能实例化注入器具有的指令。如果类'自己的注入器没有注册服务，那么它查询其父服务器。依此类推，直到使用服务或应用程序根达到注入器。

服务可以在应用程序内的任何注射器处注册。服务进入`providers: []`类模块，指令或组件的元数据字段。类'children可以实例化在类'注入器中注册的服务。毕竟儿童注射器后退在父母注射器上。

#### 依赖注入

查看每个类的骨架：服务，模块，指令和组件。

```typescript
// service 
 
 import { Injectable } from '@angular/core'; 
 
 @Injectable({ 
  providedIn: /* injector goes here */ 
 }) 
 export class TemplateService { 
  constructor() { } 
 } 
```

```typescript
// module 
 
 import { NgModule } from '@angular/core'; 
 import { CommonModule } from '@angular/common'; 
 
 @NgModule({ 
  imports: [ 
    CommonModule 
  ], 
  declarations: [], 
  providers: [ /* services go here */ ] 
 }) 
 export class TemplateModule { } 
```

```typescript
// directive 
 
 import { Directive } from '@angular/core'; 
 
 @Directive({ 
  selector: '[appTemplate]', 
  providers: [ /* services go here */ ] 
 }) 
 export class TemplateDirective { 
  constructor() { } 
 } 
```

```typescript
//component 
 
 import { Component } from '@angular/core'; 
 
 @Component({ 
  selector: 'app-template', 
  templateUrl: './template.component.html', 
  styleUrls: ['./template.component.css'], 
  providers: [ /* services go here */ ] 
 }) 
 export class TemplateComponent { 
  // class logic ... 
 } 
```

每个骨架都可以向注射器注册服务。实际上，TemplateService _是_一种服务。从Angular 6开始，服务现在可以使用`@Injectable`元数据向注入器注册。

##### 在任何情况下

注意`providedIn: string` （ `@Injectable` ）和`providers: []` （ `@Directive` ， `@Componet` `@Module`和`@Module` ）元数据。他们告诉注射器在哪里以及如何创建服务。否则，注射器将不知道如何实例化。

如果服务有依赖性怎么办？结果会在哪里？提供者回答这些问题，以便注射器可以正确实例化。

注射器构成DI框架的主干。它们存储指令以实例化服务，因此消费者不必这样做。他们接收服务实例而无需了解源依赖关系！

我还应该注意，没有喷射器的其他原理图仍然可以利用依赖注入。他们无法注册其他服务，但他们仍然可以从注入器实例化。

##### 服务

`@Injectable`的`providedIn: string`元数据指定要注册的注入器。使用此方法，并且根据服务是否被使用，服务可能会或可能不会注册到注入器。 Angular称这种_树在摇晃_ 。

默认情况下，该值设置为`'root'` 。这转换为应用程序的根注入器。基本上，将字段设置为`'root'`可使服务随处可用。

##### 快速注意

如前所述，儿童注射器会对父母产生影响。这种后备策略可确保父母不必为每个注射器重新注册。有关此概念的说明，请参阅有关[服务和注入器的](https://guide.freecodecamp.org/angular/services-and-injectors)文章。

注册服务是_单身人士_ 。意思是，实例化服务的指令仅存在于一个注入器上。这假设它没有在其他地方明确注册。

##### 模块，指令和组件

每个模块和组件都有自己的注入器实例。鉴于`providers: []`元数据字段，这一点很明显。该字段获取一组服务，并使用模块或组件类的注入器注册它们。这种方法发生在`@NgModule` `@Directive` ， `@Component` `@Directive`或`@Component`装饰器中。

此策略省略了_树形抖动_ ，或者可选择从注入器中删除未使用的服务。服务实例在模块或组件的生命周期中存在于其注入器上。

#### 实例化参考

对DOM的引用可以从任何类实例化。请记住，引用仍然是服务。它们在表示其他东西的状态方面不同于传统服务。这些服务包括与其参考进行交互的功能。

指令一直需要DOM引用。指令通过这些引用对其宿主元素进行突变。请参阅以下示例。该指令的注入器将host元素的引用实例化为类的构造函数。

```typescript
// directives/highlight.directive.ts 
 
 import { Directive, ElementRef, Renderer2, Input } from '@angular/core'; 
 
 @Directive({ 
  selector: '[appHighlight]' 
 }) 
 export class HighlightDirective { 
  constructor( 
    private renderer: Renderer2, 
    private host: ElementRef 
  ) { } 
 
  @Input() set appHighlight (color: string) { 
    this.renderer.setStyle(this.host.nativeElement, 'background-color', color); 
  } 
 } 
```

```html

// app.component.html 
 
 <p [appHighlight]="'yellow'">Highlighted Text!</p> 
```

`Renderer2`也被实例化。这些服务来自哪个注射器？好吧，每个服务的源代码都来自`@angular/core` 。然后，这些服务必须注册应用程序的根注入器。

```typescript
import { BrowserModule } from '@angular/platform-browser'; 
 import { NgModule } from '@angular/core'; 
 import { AppComponent } from './app.component'; 
 import { HighlightDirective } from './directives/highlight.directive'; 
 
 @NgModule({ 
  declarations: [ 
    AppComponent, 
    HighlightDirective 
  ], 
  imports: [ 
    BrowserModule 
  ], 
  providers: [], 
  bootstrap: [ 
    AppComponent 
  ] 
 }) 
 export class AppModule { } 
```

一个空的提供者数组！？不要害怕。 Angular会自动使用根注入器注册许多服务。这包括`ElementRef`和`Renderer2` 。在这个例子中，我们通过源自`ElementRef`实例化的接口来管理host元素。 `Renderer2`允许我们通过Angular的视图模型更新DOM。

您可以从[本文中](https://guide.freecodecamp.org/angular/views)阅读有关视图的更多信息。它们是Angular应用程序中DOM /视图更新的首选方法。

重要的是要认识到注射器在上述例子中所起的作用。通过在构造函数中声明变量类型，该类可以获得有价值的服务。每个参数的数据类型映射到进样器内的一组指令。如果注入器具有该类型，则返回所述类型的实例。

#### 实例化服务

[服务和注射器](https://guide.freecodecamp.org/angular/services-and-injectors)文章在一定程度上解释了这一部分。尽管如此，本节重新讨论了上一节或大部分内容。服务通常会提供其他内容的参考。他们也可以提供扩展类功能的接口。

下一个示例将定义一个日志服务，该服务通过其`providers: []`添加到组件的注入器`providers: []`元数据。

```typescript
// services/logger.service.ts 
 
 import { Injectable } from '@angular/core'; 
 
 @Injectable() 
 export class LoggerService { 
  callStack: string[] = []; 
 
  addLog(message: string): void { 
    this.callStack = [message].concat(this.callStack); 
    this.printHead(); 
  } 
 
  clear(): void { 
    this.printLog(); 
    this.callStack = []; 
    console.log(“DELETED LOG”); 
  } 
 
  private printHead(): void { 
    console.log(this.callStack[0] || null); 
  } 
 
  private printLog(): void { 
    this.callStack.reverse().forEach((log) => console.log(message)); 
  } 
 } 
```

```typescript
// app.component.ts 
 
 import { Component } from '@angular/core'; 
 import { LoggerService } from './services/logger.service'; 
 
 @Component({ 
  selector: 'app-root', 
  templateUrl: './app.component.html', 
  providers: [LoggerService] 
 }) 
 export class AppComponent { 
  constructor(private logger: LoggerService) { } 
 
  logMessage(event: any, message: string): void { 
    event.preventDefault(); 
    this.logger.addLog(`Message: ${message}`); 
  } 
 
  clearLog(): void { 
    this.logger.clear(); 
  } 
 } 
```

```html

// app.component.html 
 
 <h1>Log Example</h1> 
 <form (submit)="logMessage($event, userInput.value)"> 
  <input #userInput placeholder="Type a message..."> 
  <button type="submit">SUBMIT</button> 
 </form> 
 
 <h3>Delete Logged Messages</h3> 
 <button type="button" (click)="clearLog()">CLEAR</button> 
```

专注于AppComponent构造函数和元数据。组件注入器从包含LoggerService的提供程序的元数据字段接收指令。然后，注入器知道从构造函数中请求的实例化LoggerService的内容。

构造函数参数`loggerService`具有注入器识别的`LoggerService`类型。注入器如上所述进行实例化。

#### 结论

依赖注入（DI）是一种范例。它在Angular中的工作方式是通过注入器的层次结构。类无需创建或了解它们即可接收其资源。注入器接收指令并根据请求的实例来实例化服务。

DI在Angular中出现了很多。官方的Angular文档解释了为什么范式如此普遍。他们还继续以Angular方式描述DI的众多用例，超出了本文所讨论的范围。点击下面查看！

## 来源

*   [角度团队。 “依赖注入模式”。 _谷歌_ 2018年6月1日访问](https://angular.io/guide/dependency-injection-pattern)
    
*   [Zuev，阿列克谢。 “你一直想知道的Angular Dependency Injection树”。 _Angular In Depth_ ，2018年3月21日。访问2018年6月1日](https://blog.angularindepth.com/angular-dependency-injection-and-tree-shakeable-tokens-4588a8f70d5d)
    

## 资源

*   [角度文档](https://angular.io/guide/pipes)
    
*   [Angular GitHub存储库](https://github.com/angular/angular)
    
*   [依赖注入简介](https://angular.io/guide/architecture-services)
    
*   [高级依赖注入](https://angular.io/guide/dependency-injection-pattern)