@Host装饰器失效求助：Angular指令无法注入宿主组件服务

你使用@Host()装饰器注入ColorService时，Angular会仅在指令所附着的宿主元素对应的注入器中查找依赖。如果appHover指令是应用在inner-component模板内的普通DOM元素（如<div appHover>），这个DOM元素本身没有提供ColorService，自然无法找到服务；而ColorService是注册在inner-component的注入器中，不在宿主元素的注入器范围内。

方案1：保留@Host()，调整指令应用位置 #

将appHover指令直接应用在inner-component的宿主标签上（即app-component的模板中），这样指令的宿主就是inner-component本身，@Host()会直接从它的注入器中获取ColorService：

修改app.component.html：

<app-inner appHover></app-inner>

此时指令的@Host()注入会正确指向inner-component的注入器，拿到color: 'cyan'。

方案2：移除@Host()，让注入器正常向上查找 #

如果需要将指令应用在inner-component内部的元素上，直接移除@Host()装饰器，Angular会按照注入层级向上查找，找到inner-component注入器中的ColorService：

修改hover.directive.ts的构造函数：

constructor(
  private elementRef: ElementRef,
  private renderer: Renderer2,
  @Optional() private colorService: ColorService // 移除@Host()
) {}

这样即使指令在inner-component的模板内，注入器也会向上找到inner-component提供的ColorService。

两种方案都能让ngOnInit中打印出cyan，鼠标悬停时元素背景变为青色，离开时变回绿色。

内容的提问来源于stack exchange，提问作者Sergey