526互联

关于 Angular 的 hierarchical injector

发布时间 2023-10-28 10:41:57作者: JerryWang_汪子熙

Angular 的 "dependency injection" 是一种设计模式，它可以帮助我们更有效地组织和共享代码。在 Angular 中，我们可以通过注入服务（一个常见的可注入对象类型）到组件、指令或其他服务中，实现代码的复用和模块化。

Angular 的注入器系统是分层级的，也被称为 "hierarchical injector"。这意味着你可以在不同的层级创建和注入服务，从而决定它们的作用范围和共享行为。

举个例子，假设你有一个 LoggerService 用于记录应用的日志信息。你可以在应用的根模块 AppModule 中提供这个服务：

import { LoggerService } from './logger.service';

@NgModule({
  providers: [ LoggerService ],
  ...
})
export class AppModule { }

这样，LoggerService 就成了一个单例服务，整个应用只会有一个 LoggerService 实例。你可以在任何需要的地方注入这个服务：

import { LoggerService } from './logger.service';

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

然而，有时候你可能希望在某个特定的组件及其子组件中使用一个独立的 LoggerService 实例。这时，你就可以在那个组件的元数据中提供 LoggerService：

import { LoggerService } from './logger.service';

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

在这种情况下，SomeSpecificComponent 及其所有子组件中注入的 LoggerService 都会是这个新的实例，而不是在 AppModule 中提供的单例。

这就是 Angular 的 "hierarchical injector" 的工作原理。每个注入器都有一个父注入器，当你尝试在某个组件中注入服务时，Angular 会首先在该组件的注入器中查找该服务，如果没找到，就会去父注入器中查找，这个过程会一直持续到根注入器。如果在整个过程中都没找到该服务，Angular 就会抛出错误。