深入浅出谈Angular 的 @Host 装饰器和元素注入器

2024-01-29 20:42:24

Angular 强大的依赖注入机制，简化了应用程序组件间的通信和协作，从而提高了应用程序的可测试性和可维护性。而在依赖注入中，@Host 装饰器扮演着举足轻重的角色，因为它允许组件从父组件的注入器中获取依赖关系，从而打破组件层级结构的限制。

为了更好地理解 @Host 装饰器的工作原理，我们首先需要了解 Angular 的注入器体系。Angular 应用程序中存在三种不同类型的注入器：模块注入器、组件注入器和元素注入器。

模块注入器负责管理模块范围内的依赖关系，而组件注入器负责管理组件范围内的依赖关系。元素注入器则负责管理元素范围内的依赖关系。

通常情况下，组件从其父组件的注入器中获取依赖关系。但是，使用 @Host 装饰器，组件可以从父组件的父组件的注入器中获取依赖关系，依此类推。

举个例子，假设我们有一个 ParentComponent 和一个 ChildComponent。ParentComponent 中有一个名为 service 的服务，我们希望 ChildComponent 能够访问该服务。

在不使用 @Host 装饰器的情况下，ChildComponent 无法直接从其父组件 ParentComponent 的注入器中获取 service 服务，因为它不在 ChildComponent 的组件树中。

但是，如果我们在 ChildComponent 中使用 @Host 装饰器来修饰对 service 服务的注入，那么 ChildComponent 就可以从其父组件 ParentComponent 的父组件的注入器中获取 service 服务。

// ParentComponent
@Component({
  template: `<child></child>`
})
export class ParentComponent {
  service: Service;

  constructor(service: Service) {
    this.service = service;
  }
}

// ChildComponent
@Component({
  template: `{{service.data}}`
})
export class ChildComponent {
  @Host() service: Service;

  constructor() {}
}