Question

我有一个自定义指令，用于更改元素的背景颜色（例如<button hoverColor="green"><button>），但在自定义组件上使用时，它会设置自定义组件元素的背景颜色，从而导致无效效果（例如<app-list hoverColor="green"></app-list>）。

我希望该指令能够影响组件中的特定元素。如何指定自定义组件中的哪个元素应该是指令的目标？

list.component.html

<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>

悬停color.directive.ts

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.component.html

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

我希望能够添加ngDirectiveTarget之类的内容，以便背景颜色影响<fieldset/>元素而不是实际的组件元素<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>

问题图片：copyToLocal

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

0 个答案: