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

或者，您可以为模型使用getter和setter代替主机列表器

 private _boundProp: type = null;

get boundProp(){
  return this._boundProp;
}

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

侦听指令主机上的输入值更改

1 个答案: