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

Question

我有以下输入元素：

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

如您所见，我使用指令：

 range [btnClass]="'close_input_button'"

指令看起来像：

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

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

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

Answer 1

您需要输入的输入属性，然后使用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');
      }
    }
}