Angular2和jQuery’改变’事件

我有一个隐藏的输入来控制jQuery所做的更改，其中包括一个angular2 change事件，就像这样

然后在我的情况下，我必须使用jQuery来更改此输入的值，然后触发change事件：

 $('#input1').val('somevalue').trigger('change'); 

我通过jQuery触发的这个change事件只适用于jQuery，但不适用于Angular2：

 //This is working $('#input').change(function(){ console.log('Change made'); }) 

在angular2组件中：

 //This is not working onChange(): void{ console.log('Change made'); } 

在这种情况下我该如何解决？

Answer 1

您可以将模板引用变量分配给 ，如#hiddenInput1 ，在组件类中获取其本机元素（通过@ViewChild ），然后使用jQuery本身来监听change事件。

在这里演示plunker 。

 import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core'; @Component({ selector: 'my-app', template: ` 
My First Angular 2 App
 
  ` }) export class AppComponent implements AfterViewInit { @ViewChild('hiddenInput1') hiddenInput1:ElementRef; ngAfterViewInit() { $(this.hiddenInput1.nativeElement).on('change', (e) => { console.log('Change made -- ngAfterViewInit'); this.onChange(e); }); } onChange(): void{ console.log('Change made -- onChange'); } } 

Answer 2

Angular2更改事件通过本机addEventListener添加。

您不能使用jQuery的.trigger（’change’）触发本机事件。 因此，您需要创建一个本机事件并发送它 ：

  const customEvent = document.createEvent('Event'); customEvent.initEvent('change', true, true); $('#input1')[0].dispatchEvent(customEvent); 

这样，angular2将触发onChange处理程序。

这是一个演示插件

正如@Cristal Embalagens在评论中提到的，你需要为angular2使用input事件，因为DefaultValueAccessor正在订阅此事件：

 @Directive({ selector: 'input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]', host: {'(input)': 'onChange($event.target.value)', '(blur)': 'onTouched()'}, providers: [DEFAULT_VALUE_ACCESSOR] }) export class DefaultValueAccessor implements ControlValueAccessor { 

一些例子