Angular2 - 检测属性@Input 的变化

Question

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

我希望能够检测到 mask 绑定上的变化并做出反应我可以用ngOnChanges不知何故，但我觉得这就像用大刷子画问题

Sample/Simplified指令代码：

@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 会更有效率，因为它只与这个属性.

有关

Angular2 - 检测属性@Input 的变化

Angular2 - Detect Changes of Attribute @Input

javascript

angular2-changedetection

angular