Question

我是编程的新手。我已经尝试过此代码，但@hostlistner部分无法正常工作我已经使用了引导程序版本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';
          }

如何使用角度更改鼠标输入的文本颜色

2 个答案: