监听指令主机上的输入值变化

Posted 2023-02-22

【中文标题】监听指令主机上的输入值变化

【英文标题】：Listen to input value change on host of directive

【发布时间】：2019-10-07 18:29:15

【问题描述】：

我正在尝试为输入元素实现一个指令，该指令检测输入元素的值何时发生变化。我能够检测到用户所做的更改。但是，当主机元素通过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 在模型中更改而用户没有在文本区域中输入时，不会触发该操作。为什么？

【参考方案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();  

【讨论】：

谢谢。我不太明白...该属性不是在指令上定义的，而是在在其标记中使用该指令的组件模型中定义的...您能显示代码的去向以及标记的外观吗？

加价就差不多了。代码转到具有 textarea 的组件