Angular层级注入器设计模式实现代码复用模块化

Angular 依赖注入：分层注入器实现高效代码复用

如果你使用过 Angular 框架，对“依赖注入”这个设计模式应该不陌生。简单来说，它是一种让代码组织更清晰、共享更高效的方法。在 Angular 中，最常见的做法是将服务（Service）注入到组件、指令或其他服务中，从而实现模块化与复用——这就像搭积木：每个模块只管自己的事，但能通过注入机制获得别人提供的“工具”。

值得注意的是，Angular 的注入器系统并非“一张大表格”，而是分层的——官方称之为 "hierarchical injector"。这意味着你可以在不同层级创建并注入服务，从而精确控制服务的生命周期和可见范围。

Angular 分层注入器工作原理

用一个例子来理解更直观。假设你有一个 LoggerService，专门记录应用日志。如果把这个服务放在根模块 AppModule 的 providers 中：

import { LoggerService } from './logger.service';  
@NgModule({  
  providers: [ LoggerService ],  
  ...  
})  
export class AppModule { }

那么 LoggerService 就会成为全局单例——整个应用只有一个实例，任何地方注入的都是它。你可以在组件中直接使用：

import { LoggerService } from './logger.service';  
@Component({  
  ...  
})  
export class SomeComponent {  
  constructor(private logger: LoggerService) {  
    this.logger.log('Hello World!');  
  }  
}

但在实际项目中，你可能希望某个组件及其子组件拥有独立的 LoggerService 实例，与全局实例互不干扰。此时只需要在对应组件的元数据中再次提供该服务：

import { LoggerService } from './logger.service';  
@Component({  
  providers: [ LoggerService ],  
  ...  
})  
export class SomeSpecificComponent {  
  constructor(private logger: LoggerService) {  
    this.logger.log('Hello Specific World!');  
  }  
}

这样一来，SomeSpecificComponent 及其所有子组件中注入的 LoggerService 都是这个新实例，而非根模块里的那个单例。这就是分层注入器的核心表现：每个注入器都知道自己的父注入器。当你尝试在组件中注入服务时，Angular 会先从该组件自身的注入器查找，若未找到则向父注入器逐层向上查找，直到根注入器。如果整条链路上都找不到，Angular 就会抛出错误。

换句话说，分层注入器让服务的作用域可大可小——你既能享受全局单例的便利，也能在特定组件子树里“另起炉灶”，从而更灵活地控制状态与副作用。理解这一点后，你对 Angular 依赖注入的掌控力将更上一层楼。