问题

I'm trying to detect when the value of an input changed in a directive. I have the following directive:

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');
    }
}

The problem in this directive is that it detects only when there is an input and not when the value changes programatically. I use reacive form and sometimes I set the value with the patchValue() function. How can I do so the change function gets triggered?

回答1:

You need to make an input property of input and then use the ngOnChanges hook to tell when the input property changes.

@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:

There is a better way to use this result, used for example in the *ngIf Angular source code.

You can combine an @Input() with a setter. When the input changes, the setter is called again.

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

You can save the previous value in the Directive property in order to use it later and compare it with the new value:

private previousValue: any = null;

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

回答3:

You can also use HostListener. For more information about HostListener, you can go through this link. Here is the code.

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');
    }

}

来源：https://stackoverflow.com/questions/41728043/detect-when-input-value-changed-in-directive

标签

angular