如何从angular2中的指令检测输入字段的模型变化

Question

我有一个textarea的代码,它与ngModel工作得很好并且实时更新,但我希望my-custom-directive知道绑定到这个textarea的模型何时发生变化.

如何在my-custom-directive中检测此textarea的模型更改？

  <textarea my-custom-directive class="green" [(ngModel)]="customertext"></textarea>

Answer 1

更新

@Directive({
  selector: 'xyz', 
  host: {'(ngModelChange)': 'doSomething($event)'}  
}) 
export class Xyz {
  doSomething(event){... }  
} 

原版的

<textarea my-custom-directive class="green" [(ngModel)]="customertext"
    (ngModelChange)="doSomething($event) "></textarea>

[(ngModel)]="customertext"

是简短的形式

[ngModel]="customertext" (ngModelChange)="customertext=$event"  

Answer 2

尝试添加到您的指令:

@HostListener('input') onInput() {
        console.log('on input');
}

Answer 3

有多种方法可以检测更改,它还取决于Component中定义的ChangeDetectionStrategy.

为了提供帮助,我将简化答案并专注于与ngModel指令交互的Reactive Extensions(Rx)方式,因为它功能强大且与角度2变化检测引擎具有最佳集成性能.

首先,我们需要强调NgModel绑定到Element的值,所有更改都通过您订阅的EventEmitter传播.所述EventEmitter是Angular2类型,它是一个主题的Rx这基本上是一个对象,它可以"发送"(发射)事件/数据,并且还可以以"收到"数据作出反应.所以在Rx中它是一个Observable和一个Observer.

另外值得一提的是ngModel上的"ngOnChanges"方法接收处理变更事件的处理程序,但我们将重点关注Rx方法.

因此,我们需要访问该Observable并订阅它,太棒了!

为了获得访问权限,我们使用依赖注入,只需声明我们想要在我们的指令的构造函数中获取NgModel.

现在我们还需要小心,我们需要确保我们确实得到了NgModel否则我们会有错误.

我们可以通过创建一个强制执行 NgModel元素的指令选择器来静默地执行它,例如:'selector':'[myCustomDirective] [ngModel]',现在如果ngModel不是元素的一部分,它将与指令的选择器不匹配.

或者,我们可以制造噪音而不是默默地出去,我们将依赖注入标记为@Optional,如果它为null,我们可以抛出一个明确的异常,说明丢失了什么.如果我们不将其标记为@Optional angular将抛出关于缺失依赖项的通用消息,那么它可以但不好.

现在,一个例子:

import {Directive, Optional} from 'angular2/core';
import {NgModel}from 'angular2/common';

@Directive({
  selector: '[myCustomDirective][ngModel]'
})
export class MyCustomDirective {
  constructor(@Optional() public model: NgModel) {
    if (!model)
      throw new Error ("myCustomDirective requires ngModel.");

    // this code should be in a designated functions...

    // register to incoming changes to the model
    // we can also transform values..., for example take only distinct values...
    // this.model.update.distinctUntilChanged()...
    let subscription = this.model.update.subscribe((newValue) => {
      // Changes happen here, do something with them... 
      // note that the value of this.model is still the old value
      // The local parameter "newValue" holds the new value.
    });

    // We can also change the value of the model:
    this.model.update.emit('something...');
  }
}

希望有所帮助.