如何使用 angular 更改鼠标输入时的文本颜色

Question

我是编程新手。我试过这段代码，但@hostlistner 部分不起作用我用过 bootstrap 版本 4

它也没有给出任何编译错误

 element.nativeElement.style.color = 'red'

这个语句有效但是

 this.element.nativeElement.style.color = 'blue';

这个没有

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

         @Directive({
          selector: '[setmycolor]'
           })
          export class SetmycolorDirective {

          constructor(private element:ElementRef) {
          element.nativeElement.style.color = 'red';
          }


          @HostListener('onmouseenter')onMouseEnter(){
          this.element.nativeElement.style.color = 'blue';
          }

          }

应用程序中的代码

Answer 1

尝试以下：

监听事件的名字是mouseenter，不是onmouseenter。希望你明白了。:)

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

         @Directive({
          selector: '[setmycolor]'
           })
          export class SetmycolorDirective {

          constructor(private element:ElementRef) {
          element.nativeElement.style.color = 'red';
          }


          @HostListener('mouseenter') onMouseEnter(){ //SEE HERE
          this.element.nativeElement.style.color = 'blue';
          }

          }

Answer 2

您的代码是正确的，只需将 onmouseenter 替换为 mouseenter

@HostListener('mouseenter') onMouseEnter(){
          this.element.nativeElement.style.color = 'blue';
          }

如何使用 angular 更改鼠标输入时的文本颜色

how to change color of text on mouse enter using angular

angular

bootstrap-4.1.x