Обнаруживать, когда введенное значение изменено в директиве

Я пытаюсь обнаружить, когда значение ввода изменилось в директиве. У меня есть следующая директива:

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

@Directive({
    selector: '[number]',
    host: {"(input)": 'onInputChange($event)'}
})

export class Number {

    constructor(private element: ElementRef, private renderer: Renderer){

    }
    onInputChange(event){
        console.log('test');
    }
}

Проблема в этой директиве заключается в том, что она обнаруживает только тогда, когда есть вход, а не когда значение изменяется программно. Я использую повторяющуюся форму, и иногда я устанавливаю значение с помощью функции patchValue(). Как я могу сделать так, чтобы функция изменения активировалась?

Ответы

Ответ 1

Вам нужно сделать входное свойство input а затем использовать хук ngOnChanges чтобы сообщить, когда изменяется свойство input.

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

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

Plunkr

Stackblitz

Ответ 2

Есть лучший способ использовать этот результат, например, в исходном коде *ngIf Angular.

Вы можете комбинировать @Input() с setter. Когда вход изменяется, сеттер вызывается снова.

@Input() set numberOfWheels(wheels: number) {
  if(wheels === 2) {
    console.log("It a bike!");
  }
  else if(wheels === 4) {
    console.log("It a car!");
  }
  else {
    console.log("I don't know what it is :(");
  }
}

Вы можете сохранить предыдущее значение в свойстве Directive, чтобы использовать его позже и сравнить с новым значением:

private previousValue: any = null;

@Input() set myInputName(value: any) {
  console.log('Previous value is: ${this.previousValue}');
  console.log('New value is: ${value}');
  this.previousValue = value;  
}

Ответ 3

Вы также можете использовать HostListener. Для получения дополнительной информации о HostListener вы можете перейти эту ссылку. Вот код.

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


@Directive({
       selector: '[number]'
 })

export class NumberDirective {

    @Input() public number: any;
    @Input() public input: any;

    constructor(private el: ElementRef) {}

    @HostListener('change') ngOnChanges() {
        console.log('test');
    }

}