Angular 18 指令 - 更改悬停时按钮的颜色

Question

我是 Angular 新手，正在学习如何使用 Angular 18 创建一个可以更改元素背景颜色的简单自定义指令。我指的是 Angular 文档here中提供的代码，但它不起作用。我需要在代码中添加任何内容才能使其正常工作吗？

自定义指令：

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

@Directive({
  selector: '[appHighlight]',
  standalone: true
})
export class HighlightDirective {

  constructor(private el: ElementRef, private render : Renderer2) {
   }

   @HostListener('mouseenter') OnMouseOver(eventData: Event){
      this.changeColor('yellow')
   }

   private changeColor(color :string)
   {
    this.render.setStyle(this.el.nativeElement,'backgroundcolor',color)
   }
}

成分：

<div  class="parent">
<p appHighlight >Product Component</p>
</div>

任何解决方案谢谢。

我尝试使用 HostBinding 获得解决方案，但它不起作用。 预期：了解它是如何工作的以及上面的代码有什么问题。

Answer 1

在使用该指令的组件中，您是否已将指令添加到像这样的导入中

@Component({
 selector: 'app-root',
 standalone: true,
 imports: [HighlightDirective],
 templateUrl: './app.component.html',
 styleUrl: './app.component.scss',
})
export class AppComponent {