检测指令中输入值何时更改

Question

我正在尝试检测指令中输入的值何时更改。我有以下指令：

    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() 函数设置值。如何触发更改功能？

Answer 1

您需要创建input 的输入属性，然后使用ngOnChanges 挂钩来判断输入属性何时更改。

@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

Answer 2

有一种更好的方法可以检测Input 属性何时发生变化，它被认为是一种最佳做法，它也用于*ngIf implementation。

您只需将关键字set 推迟到Input() 之后，这样您就可以将@Input() 装饰器与setter 结合起来，并且它会在值发生变化时被调用。

_rows: number;
@Input() set rows(value: number) {
  if (this.value < 0) {
    console.error('The number of rows must be positive');
    this._rows = 2;
    return;
  }
 
  this._rows = value;
}

如果要将新值与之前的值进行比较，则必须将变量存储在类属性中，并在第二次调用该方法时检索它：

private previousValue: any = T;

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

Answer 3

从 Angular 9+ 开始，我可以验证下面的 sn-p 是正确的解决方案。出于多种原因，最好尽可能避免ngOnChanges，而是使用正确的主机侦听器事件。下面的示例将获取keyup 上的当前输入值。您可以根据输入指令的需要轻松自定义此代码 sn-p。

  @Directive({
      selector: '[appMyDirective]',
  })
  export class MyDirective {
    // Add whatever event you want to track here
    @HostListener('keyup', ['$event']) public onKeyup(event: KeyboardEvent): void {
      const value = (event.target as HTMLInputElement).value;
      console.log(value);
    }
  }

Answer 4

您也可以使用 HostListener。关于 HostListener 的更多信息，您可以通过this link。这是代码。

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

}