Прослушайте изменение входного значения на хосте директивы

Question

Я пытаюсь реализовать директиву для элементов ввода, которая обнаруживает всякий раз, когда значение элемента ввода изменяется. Я могу обнаружить изменения, сделанные пользователем. Тем не менее, мое обнаружение изменений не работает, когда хост-элемент связан через ngModel и значение модели изменяется.

modelChanged = new Subject<any>();

@HostListener("ngModelChange")
onModelChange() {  
  this.modelChanged.next();  
}

constructor(private host: ElementRef) { }

ngAfterViewInit() {

   var stateChange$ = merge(
      this.modelChanged,
      fromEvent(this.host.nativeElement, 'input'),
      fromEvent(this.host.nativeElement, 'change'),
      fromEvent(this.host.nativeElement, 'cut'),
      fromEvent(this.host.nativeElement, 'paste'),
      fromEvent(this.host.nativeElement, 'drop'),
      fromEvent(this.host.nativeElement, 'keydown'));

   stateChange$.subscribe(d => { this.do() });
}

С этой разметкой:

<textarea directiveSelector name="boundProp" [(ngModel)]="boundProp"></textarea>

Когда boundProp изменяется в модели без ввода пользователем текстовой области, действие не запускается. Почему?

Answer 1

альтернативно, вы можете использовать геттер и сеттер для модели вместо хоста listner

 private _boundProp: type = null;

get boundProp(){
  return this._boundProp;
}

// trigger when model changes
set boundProp(val){
  this._boundProp = val; 
  this.modelChanged.next();  
}