Angular 如何指定自定义组件中的哪个元素应该是指令的目标？

我有一个自定义指令，用于更改元素的背景色（例如，

），但在自定义组件上使用时，它会设置自定义组件元素的背景色，从而不会产生可见效果（例如，

您可以尝试一些想法：使用指令内部的装饰器来选择您要定位的元素。但是，不确定指令是否有“视图”。ViewChild可能仅用于组件…或者：因为您有对附加该指令的根DOM元素的引用（
this.element.nativeElement
），是否可以从此元素开始遍历DOM，直到到达目标元素？首先，您应该检查开发人员工具中的DOM节点，以检查样式是否已应用。我已验证样式是否已应用。问题是，我希望指令可扩展，并且始终以模板中的第一个元素为目标，或者，如果它是一个原生元素，如按钮或div，它应该设置该元素的背景色。老实说，如果选择器元素作为div运行，我不需要做任何事情。我只想找到一种通用的方法来修改任何元素或模板的背景。您可以尝试一些想法：从指令内部使用decorator选择目标元素。不确定指令是否有“视图”，但.ViewChild只能用于组件…或：因为您有对附加该指令的根DOM元素的引用（
this.element.nativeElement
），是否可以从此元素开始遍历DOM，直到到达目标元素？首先，您应该检查开发人员工具中的DOM节点，以检查样式是否已应用。我已验证样式是否已应用。问题是，我希望指令可扩展，并且始终以模板中的第一个元素为目标，或者，如果它是一个本地元素，如按钮或div，它应该设置该元素的背景色。老实说，如果选择器元素用作div，我不需要做任何事情。我只需要一种通用的方法来修改任何元素或模板的背景
<fieldset class="checkboxgroup">
  <ng-content></ng-content>
    <p>{{title}}</p>
    <label *ngFor="let item of items">
      <input type="checkbox" [value]="item[valueProperty]" (change)="onChange($event)">
      {{item[displayProperty]}}
    </label>
</fieldset>

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[hoverColor]'
})
export class HoverColorDirective {

  private originalColor: string;
  @Input() hoverColor: string; 

  constructor(private element: ElementRef) { 
    this.originalColor = this.element.nativeElement.style.backgroundColor;
  }

  @HostListener('mouseenter') onMouseEnter() {
    this.setBackgroundColor(this.hoverColor);
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.setBackgroundColor(this.originalColor);
  }

  private setBackgroundColor(color: string) {
    this.element.nativeElement.style.backgroundColor = color;
  }

}

<app-list 
    hoverColor="green" 
    [items]="myItems" 
    title="My Custom List" 
    displayProperty="name" 
    valueProperty="age" 
    [(selectedValues)]="selected"></app-list>

<fieldset ngDirectiveTarget class="checkboxgroup">
  <ng-content></ng-content>
    <p>{{title}}</p>
    <label *ngFor="let item of items">
      <input type="checkbox" [value]="item[valueProperty]" (change)="onChange($event)">
      {{item[displayProperty]}}
    </label>
</fieldset>