javascript - Angular2 - 检测属性@Input的变化

Question

我有一个简单的属性指令mask，带有@Input() mask:string

我希望能够检测到mask我可以以某种方式使用的绑定的变化并做出反应ngOnChanges，但我觉得这就像用大刷子画问题

指令的示例/简化代码：

@Directive({
  selector: 'mask'
})
export class MaskDirective implements AfterViewInit {
  @Input() mask: string;

  constructor(public el: ElementRef) {};

  ngAfterViewInit() {
    $(this.el.nativeElement).mask(this.mask);
  }
}

用法：

<input type='text' [mask]='someBinding'>

当值发生someBinding变化时，如何执行一些代码，而不依赖于ngChanges？

Answer 1

您可以使用 setter 方法mask而不是更广泛的属性ngOnChanges：

@Directive({
  selector: 'mask'
})
export class MaskDirective implements AfterViewInit {
  @Input set mask(newValue: string) {
    $(this.el.nativeElement).mask(newValue);
  }

  constructor(public el: ElementRef) {};


}

Setter 会更有效率，因为它只与这个属性有关。