Почему декоратор @Host не действует?

Question

[serg_kalinin]

Я создал такую иерархию:
app-component -> inner-component -> hover-directive

Директива красит компонент, к которому применяется при наведении мыши. Но цвет берётся из сервиса. Этот сервис регистрируется в инжекторе через inner-component.

Проблема в том, что инжектируется этот сервис в директиве и при этом используется @Host. Как я понимаю, поиск сервиса должен происходить в компоненте, к которому применяется директива, то есть в inner-component. Однако этого не происходит, в этом проблема. Помогите пожалуйста исправить скрипт.

live example

directive:

@Directive({
  // providers: [ColorService],
  selector: '[appHover]',
})
export class HoverDirective implements OnInit {
  color: string;

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

  ngOnInit() {
    this.color = this.colorService?.color;
    console.log('---', this.color);
  }

  @HostListener('mouseenter') mouseover() {
    this.renderer.setStyle(
      this.elementRef.nativeElement,
      'background-color',
      this.color
    );
  }

  @HostListener('mouseleave') mouseleave() {
    this.renderer.setStyle(
      this.elementRef.nativeElement,
      'background-color',
      'green'
    );
  }
}

inner-component:

@Component({
  selector: 'app-inner',
  providers: [ColorService],
  templateUrl: './inner.component.html',
  styleUrls: ['./inner.component.css'],
})
export class InnerComponent {}

app-component:

@Component({
  selector: 'my-app',
  // providers: [ColorService],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {}

service:

@Injectable()
export class ColorService {
  color = 'cyan';
}