Angular 为什么更改事件不适用于输入？

我有以下输入元素：

 <input
        range
        [btnClass]="'close_input_button'"
        type="text"
        class="reset-border-right"
        formControlName="parentId1Name"
      />

指令看起来像：

@Directive({
  selector: "[range]"
})
export class RangeDirective implements OnInit {
   @HostListener("change", ["$event"]) ngOnChanges(value: any) {
    console.log(value);
  }
}

为什么当我使用被动形式为输入设置新值时，它会触发指令中的更改事件

this.form.get("parentId1Name").setValue('New value');

完整指令是：

import {
  Input,
  HostListener,
  OnInit,
  OnChanges,
  SimpleChanges
} from "@angular/core";
import { Renderer2 } from "@angular/core";
import { ElementRef } from "@angular/core";
import { Directive } from "@angular/core";

@Directive({
  selector: "[range]"
})
export class RangeDirective implements OnInit, OnChanges {
  constructor(private elementRef: ElementRef, private renderer: Renderer2) {}

  readonly _elements = ["INPUT", "SELECT", "TEXTAREA"];
  private newDomElement: any;

  @Input() btnClass: string;
  @Input() model: any;
  @Input() position: string = "right";

  ngOnInit(): void {
    const parent = this.elementRef.nativeElement.parentNode;
    const reference = this.elementRef.nativeElement;

    this.elementRef.nativeElement.parentNode.style.position = "relative";
    this.newDomElement = this.createButton();
    this.renderer.insertBefore(parent, this.newDomElement, reference);
  }

  @HostListener("keyup", ["$event"]) ngKeyup(value: any) {
    this.eventHandler(value);
  }

  @HostListener("change", ["$event"]) ngChange(value: any) {
    this.eventHandler(value);
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.input) {
      console.log("input changed");
    }
  }

  eventHandler(value: any) {
    if (!value.srcElement) return;
    const _value = value.srcElement.value.toString().trim();
    if (_value) {
      this.newDomElement.style.display = "flex";
    } else {
      this.newDomElement.style.display = "none";
    }
  }

  createButton() {
    let closeButton = document.createElement("div");
    closeButton.innerHTML = '<i class="material-icons">clear</i>';
    closeButton.className = this.btnClass;
    closeButton.className += " " + this.position;
    closeButton.style.display = "none";
    closeButton.onclick = () => {
      closeButton.style.display = "none";
      this.elementRef.nativeElement.value = null;
    };

    return closeButton;
  }

导入{
输入，
主持人：，
奥尼特，
一旦改变，
简单变化
}从“@角度/核心”；
从“@angular/core”导入{Renderer2}”；
从“@angular/core”导入{ElementRef}；
从“@angular/core”导入{Directive}；
@指示({
选择器：“[范围]”
})
导出类RangeDirective实现OnInit、OnChanges{
构造函数（private-elementRef:elementRef，private-Renderer2）{}
只读元素=[“输入”、“选择”、“文本区域”]；
私有NewDomeElement：任何；
@Input（）btnClass:string；
@Input（）模型：任意；
@Input（）位置：string=“right”；
ngOnInit（）：void{
const parent=this.elementRef.nativeElement.parentNode；
常量引用=this.elementRef.nativeElement；
this.elementRef.nativeElement.parentNode.style.position=“relative”；
this.newdoElement=this.createButton（）；
this.renderer.insertBefore（父级，this.newdoElement，引用）；
}
@HostListener（“keyup”，[“$event”]）ngKeyup（值：任意）{
此.eventHandler（值）；
}
@HostListener（“更改”，[“$event”]）ngChange（值：任意）{
此.eventHandler（值）；
}
ngOnChanges（更改：SimpleChanges）：无效{
if（changes.input）{
console.log（“输入已更改”）；
}
}
eventHandler（值：任意）{
如果（！value.srcElement）返回；
const_value=value.srcmelement.value.toString（）.trim（）；
如果（_值）{
this.newdoElement.style.display=“flex”；
}否则{
this.newdoElement.style.display=“无”；
}
}
createButton（）{
让closeButton=document.createElement（“div”）；
closeButton.innerHTML='clear'；
closeButton.className=this.btnClass；
closeButton.className+=''+此位置；
closeButton.style.display=“无”；
closeButton.onclick=（）=>{
closeButton.style.display=“无”；
this.elementRef.nativeElement.value=null；
};
返回关闭按钮；
}

---

}

您需要为input创建一个input属性，然后使用ngOnChanges钩子来判断输入属性何时更改

@Directive({
    selector: '[range]'
})
export class RangeDirective implements OnChanges {
    @Input() public range: any;
    @Input() public input: any;

    ngOnChanges(changes: SimpleChanges){
      if(changes.input){
        console.log('input changed');
      }
    }
}

---

我已经试过了，它不起作用，我看不到'console.log（'input changed'）`而是

@Input（）公共范围：任意@Input（）公共输入：任意我使用
私有元素ref:elementRef
你能提供plunker或stackblitz吗。简单的修复方法。我可以发布完整的指令，请看下面的问题请检查stackoverflow链接：这可能有用。
@Directive({
    selector: '[range]'
})
export class RangeDirective implements OnChanges {
    @Input() public range: any;
    @Input() public input: any;

    ngOnChanges(changes: SimpleChanges){
      if(changes.input){
        console.log('input changed');
      }
    }
}