面试题：Angular中依赖注入的工作原理及常见应用场景

Angular依赖注入的工作原理

注入器（Injector）：Angular应用是由一个或多个注入器组成的树状结构。注入器负责创建、缓存和提供依赖对象。当一个组件或服务请求一个依赖时，注入器会查找它的缓存，看是否已经创建了该依赖的实例。如果没有，则根据注册的提供商（Provider）创建一个新的实例。
提供商（Provider）：提供商是用来告诉注入器如何创建依赖对象的。有多种类型的提供商，比如 ClassProvider（用于注册一个类作为依赖），ValueProvider（用于注册一个值作为依赖）等。例如，在模块的 providers 数组中注册一个服务类：

@NgModule({
  providers: [MyService]
})
export class AppModule {}

这里 MyService 就是一个 ClassProvider。 3. 注入点（Injection Point）：在组件或服务的构造函数中声明依赖，这就是注入点。例如：

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html'
})
export class MyComponent {
  constructor(private myService: MyService) {}
}

Angular会在创建 MyComponent 实例时，从注入器中获取 MyService 的实例并注入到构造函数中。

实际项目中使用依赖注入的常见场景

服务注入：在组件中使用服务是最常见的场景。比如一个 UserService 用于处理用户相关的操作（如登录、注册等），多个组件可能都需要使用这个服务。通过依赖注入，组件可以轻松获取 UserService 的实例来调用其方法。

@Component({
  selector: 'app-login',
  templateUrl: './login.html'
})
export class LoginComponent {
  constructor(private userService: UserService) {}

  login() {
    this.userService.login();
  }
}

配置注入：应用中可能有一些全局配置，比如API的基础URL。可以将这些配置作为值依赖注入到需要的组件或服务中。

const apiConfig = {
  baseUrl: 'https://api.example.com'
};

@NgModule({
  providers: [
    { provide: 'API_CONFIG', useValue: apiConfig }
  ]
})
export class AppModule {}

@Component({
  selector: 'app-data-fetcher',
  templateUrl: './data-fetcher.html'
})
export class DataFetcherComponent {
  constructor(@Inject('API_CONFIG') private config: any) {}

  fetchData() {
    const url = this.config.baseUrl + '/data';
    // 进行数据获取操作
  }
}

依赖注入对可维护性和可测试性的帮助

可维护性：
- 解耦组件与依赖：依赖注入使得组件不直接负责创建其依赖，而是通过注入获取。这样当依赖的实现发生变化时（比如更换服务的实现类），只需要修改提供商的配置，而不需要修改使用该依赖的组件代码。例如，从使用一个模拟的 MockUserService 切换到真实的 UserService，只需要在模块的 providers 数组中修改提供商。
- 模块化与可复用性：依赖作为独立的模块（服务等）可以被多个组件复用。同时，不同的模块可以根据自身需求提供不同的依赖实例，使得代码结构更加清晰和易于维护。
可测试性：
- 易于模拟依赖：在测试组件时，可以轻松地提供模拟的依赖对象。例如，在测试一个依赖 UserService 的组件时，可以创建一个 MockUserService 并注入到组件中，这样可以隔离组件与真实服务的交互，专注于测试组件自身的逻辑。
- 提高测试的独立性：通过依赖注入，组件的测试不依赖于真实依赖的复杂初始化和配置。可以单独测试每个组件，并且可以针对不同的测试场景提供不同的模拟依赖，从而提高测试的覆盖率和准确性。

星途面试题库

面试题：Angular中依赖注入的工作原理及常见应用场景

知识考点

面试题答案

Angular依赖注入的工作原理

实际项目中使用依赖注入的常见场景

依赖注入对可维护性和可测试性的帮助