在 Angular 中，依赖注入是一个非常重要的概念。它允许我们将依赖项注入到组件、服务和其他对象中，以便它们可以相互协作。然而，依赖注入也可能引起一些“坑”，让我们来看看这些问题以及如何解决它们。
问题一：循环依赖
循环依赖是指两个或多个对象相互依赖，形成一个循环。在 Angular 中，这种依赖关系可能会导致应用程序崩溃或无法正常工作。例如，下面的代码中存在循环依赖：
// www.javascriptcn.com code example
// service1.ts
import { Injectable } from '@angular/core';
import { Service2 } from './service2';
@Injectable()
export class Service1 {
constructor(private service2: Service2) {}
}
// service2.ts
import { Injectable } from '@angular/core';
import { Service1 } from './service1';
@Injectable()
export class Service2 {
constructor(private service1: Service1) {}
}在这个例子中，Service1 依赖于 Service2，而 Service2 又依赖于 Service1，形成了一个循环依赖。当我们运行应用程序时，Angular 将无法解决这种依赖关系，导致应用程序崩溃。
解决方案一：使用可选的依赖注入
解决循环依赖问题的一种方法是使用可选的依赖注入。这意味着我们可以在构造函数中注入一个可选的依赖项，而不是强制性地依赖于另一个服务。例如，我们可以将上面的代码修改为：
// www.javascriptcn.com code example
// service1.ts
import { Injectable, Optional } from '@angular/core';
import { Service2 } from './service2';
@Injectable()
export class Service1 {
constructor(@Optional() private service2: Service2) {}
}
// service2.ts
import { Injectable } from '@angular/core';
import { Service1 } from './service1';
@Injectable()
export class Service2 {
constructor(private service1: Service1) {}
}在这个例子中，我们在 Service1 的构造函数中使用了 @Optional() 装饰器来注入 Service2，这意味着 Service2 是可选的。这样，即使 Service2 未定义，Service1 也可以正常工作，避免了循环依赖问题。
问题二：多个实例
另一个常见的问题是多个实例。当我们在多个组件或服务中注入同一个服务时，Angular 可能会为每个组件或服务创建一个新的实例。这可能会导致我们无法在多个组件之间共享数据或状态。
例如，考虑以下代码：
// www.javascriptcn.com code example
// service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class MyService {
private value = 0;
getValue() {
return this.value;
}
increment() {
this.value++;
}
}
// component1.ts
import { Component } from '@angular/core';
import { MyService } from './service';
@Component({
selector: 'app-component1',
template: `
<h1>Component 1</h1>
<p>Value: {{ value }}</p>
<button (click)="increment()">Increment</button>
`
})
export class Component1 {
value: number;
constructor(private myService: MyService) {}
ngOnInit() {
this.value = this.myService.getValue();
}
increment() {
this.myService.increment();
this.value = this.myService.getValue();
}
}
// component2.ts
import { Component } from '@angular/core';
import { MyService } from './service';
@Component({
selector: 'app-component2',
template: `
<h1>Component 2</h1>
<p>Value: {{ value }}</p>
<button (click)="increment()">Increment</button>
`
})
export class Component2 {
value: number;
constructor(private myService: MyService) {}
ngOnInit() {
this.value = this.myService.getValue();
}
increment() {
this.myService.increment();
this.value = this.myService.getValue();
}
}在这个例子中，我们有一个名为 MyService 的服务，它有一个私有变量 value，并且有两个组件 Component1 和 Component2，它们都注入了 MyService。当我们在 Component1 中增加 value 的值时，Component2 中的 value 并没有相应地更新，这是因为 MyService 的两个实例是不同的。
解决方案二：使用共享模块
解决多个实例问题的一种方法是使用共享模块。共享模块是一个模块，它包含多个组件、服务和其他对象，这些对象可以在应用程序的多个部分之间共享。要创建共享模块，我们可以使用 @NgModule 装饰器，并将需要共享的对象添加到 providers 数组中。例如，我们可以将上面的代码修改为：
// www.javascriptcn.com code example
// shared.module.ts
import { NgModule } from '@angular/core';
import { MyService } from './service';
@NgModule({
providers: [MyService]
})
export class SharedModule {}
// component1.ts
import { Component } from '@angular/core';
import { MyService } from './service';
@Component({
selector: 'app-component1',
template: `
<h1>Component 1</h1>
<p>Value: {{ value }}</p>
<button (click)="increment()">Increment</button>
`
})
export class Component1 {
value: number;
constructor(private myService: MyService) {}
ngOnInit() {
this.value = this.myService.getValue();
}
increment() {
this.myService.increment();
this.value = this.myService.getValue();
}
}
// component2.ts
import { Component } from '@angular/core';
import { MyService } from './service';
@Component({
selector: 'app-component2',
template: `
<h1>Component 2</h1>
<p>Value: {{ value }}</p>
<button (click)="increment()">Increment</button>
`
})
export class Component2 {
value: number;
constructor(private myService: MyService) {}
ngOnInit() {
this.value = this.myService.getValue();
}
increment() {
this.myService.increment();
this.value = this.myService.getValue();
}
}在这个例子中，我们创建了一个名为 SharedModule 的共享模块，并将 MyService 添加到了 providers 数组中。现在，当我们在 Component1 中增加 value 的值时，Component2 中的 value 也会相应地更新，因为它们都使用了同一个 MyService 实例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67da34eba941bf71341f72da