面试题：Angular依赖注入如何解决循环依赖问题

1. 依赖注入系统检测循环依赖原理

Angular的依赖注入系统使用深度优先搜索（DFS）算法来解析依赖关系。在解析过程中，它会为每个正在解析的依赖创建一个“解析栈”。当尝试解析一个新的依赖时，会先检查这个依赖是否已经在当前的解析栈中。如果存在，就意味着检测到了循环依赖，因为这表明正在递归地解析已经在解析过程中的依赖。

2. 解决循环依赖的机制

惰性注入（Lazy Loading）：通过延迟加载模块来打破循环依赖。Angular的路由模块支持惰性加载，这样模块及其依赖不会在应用启动时立即加载，而是在需要时加载。
使用@Inject装饰器的forwardRef函数：在@Injectable装饰器或组件的providers数组中，可以使用forwardRef函数来延迟依赖的解析。这允许在定义依赖时使用一个函数，该函数在实际需要解析依赖时才会被调用，从而避免在模块加载时就触发循环依赖检测。

3. 实际开发中可能出现循环依赖的场景

组件间双向依赖：例如，组件A依赖组件B，同时组件B又依赖组件A。

// component-a.ts
import { Component } from '@angular/core';
import { ComponentB } from './component-b';

@Component({
  selector: 'app-component-a',
  templateUrl: './component-a.html'
})
export class ComponentA {
  constructor(private componentB: ComponentB) {}
}

// component-b.ts
import { Component } from '@angular/core';
import { ComponentA } from './component-a';

@Component({
  selector: 'app-component-b',
  templateUrl: './component-b.html'
})
export class ComponentB {
  constructor(private componentA: ComponentA) {}
}

服务间双向依赖：服务A依赖服务B，服务B又依赖服务A。

// service-a.ts
import { Injectable } from '@angular/core';
import { ServiceB } from './service-b';

@Injectable()
export class ServiceA {
  constructor(private serviceB: ServiceB) {}
}

// service-b.ts
import { Injectable } from '@angular/core';
import { ServiceA } from './service-a';

@Injectable()
export class ServiceB {
  constructor(private serviceA: ServiceA) {}
}

4. 应对方案

重构组件或服务结构：重新设计组件或服务，使其依赖关系更加合理，避免双向依赖。例如，可以提取公共逻辑到一个新的服务或组件中，让原来相互依赖的组件或服务依赖这个新的实体。
使用forwardRef：对于组件间依赖，如上述组件A和组件B的例子，可以这样修改：

// component-a.ts
import { Component } from '@angular/core';
import { forwardRef } from '@angular/core';
import { ComponentB } from './component-b';

@Component({
  selector: 'app-component-a',
  templateUrl: './component-a.html'
})
export class ComponentA {
  constructor(@Inject(forwardRef(() => ComponentB)) private componentB: ComponentB) {}
}

// component-b.ts
import { Component } from '@angular/core';
import { forwardRef } from '@angular/core';
import { ComponentA } from './component-a';

@Component({
  selector: 'app-component-b',
  templateUrl: './component-b.html'
})
export class ComponentB {
  constructor(@Inject(forwardRef(() => ComponentA)) private componentA: ComponentA) {}
}

对于服务间依赖：同样可以使用forwardRef，但通常重构服务结构是更好的选择，以提高代码的可维护性和清晰度。

星途面试题库

面试题：Angular依赖注入如何解决循环依赖问题

知识考点

面试题答案

1. 依赖注入系统检测循环依赖原理

2. 解决循环依赖的机制

3. 实际开发中可能出现循环依赖的场景

4. 应对方案