Hostlistener键入事件不特定于输入元素

如何解决Hostlistener键入事件不特定于输入元素

我有一个自定义指令，用于检查输入字段中的字符数并根据字符数更改背景颜色。

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

@Directive({
  selector: '[appMydirective]'
})
export class MydirectiveDirective implements OnChanges {
  constructor(private el: ElementRef) {}
  @HostListener("window:keyup") ngOnChanges() {
    let count = this.el.nativeElement.value.length;
    if (count <= 25) this.el.nativeElement.style.backgroundColor = "#ff5858";
    else if (count > 25 && count < 50) this.el.nativeElement.style.backgroundColor = "#c988ff";
    else if (count >= 50) this.el.nativeElement.style.backgroundColor = "#c5ff9a";
  }
}

此指令在HTML文件中使用。

<textarea  [class.is-invalid] = "myForm.get('aboutU').invalid && myForm.get('aboutU').touched" class="form-control" placeholder="Atleast 25 characters" id="aboutU" rows="3" formControlName="aboutU" appMydirective></textarea>

问题是当我输入email输入元素时，此aboutU背景颜色正在改变。 它没有指定aboutU输入元素。为什么？ 如果我使用的是ngStyle指令，那么它就像是魅力，但是我需要弄清楚这个问题，为什么其他输入元素在键入其他元素时会发生变化。

解决方法

我随机尝试了此操作，因为我认为window中window:keyup的使用是有效的。 所以换这行 @HostListener("window:keyup") ngOnChanges() 到@HostListener("keyup") ngOnChanges() 有效。