在Angular2中如何知道任何表单input字段何时失去焦点

在Angular2如何知道任何input字段失去焦点..! 如果我在表单上使用observables:

form.valueChange.subscribe... 

无法工作,因为我真的想知道什么时候一个领域失去了模糊(焦点),所以我可以更新我的商店(如果我失去焦点之前更新商店,我的光标在文本input移动到最后,因为数据被交换这是奇怪的看起来)

当然,我也可以添加(change)=""在每个input,但我有很多'…

我在想什么:

 this.form.valueChanges.debounceTime(1000).subscribe((changes:any) => { if (this.form.dirty){ this.appStore.dispatch(this.resellerAction.updateResellerInfo(changes)) } }); 

但问题是,肮脏仍然肮脏,所以它陷入了一个永恒的变化检测循环…

TX

肖恩

blur事件不起泡,因此我们需要直接监听每个input元素。 Angular为这种情况提供了一个很好的解决scheme。

适用于模板内所有input元素的指令。

此指令使用主机侦听器侦听select器应用的所有元素上的blur事件,并转发冒泡input-blur事件:

 @Directive({ selector: 'input,select', host: {'(blur)': 'onBlur($event)'} }) class BlurForwarder { constructor(private elRef:ElementRef, private renderer:Renderer) {} onBlur($event) { this.renderer.invokeElementMethod(this.elRef.nativeElement, 'dispatchEvent', [new CustomEvent('input-blur', { bubbles: true })]); // or just // el.dispatchEvent(new CustomEvent('input-blur', { bubbles: true })); // if you don't care about webworker compatibility } } 

通过将BlurForwarder指令添加到directives: [...]它将被应用于其模板中与select器相匹配的所有元素。
主机侦听器侦听冒泡input-blur事件并调用我们的事件处理程序:

 @Component({ selector: 'my-component', directives: [BlurForwarder], host: {'(input-blur)':'onInputBlur($event)'}, template: ` <form> <input type="text" [(ngModel)]="xxx"> <input type="text" [(ngModel)]="yyy"> <input type="text" [(ngModel)]="zzz"> </form>` }) { onInputBlur(event) { doSomething(); } } 

为什么不在DOM中使用默认的焦点呢?