285 lines
11 KiB
Markdown
285 lines
11 KiB
Markdown
---
|
||
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) |