Javascript Angular2和jQuery'；改变'；事件

我有一个隐藏的输入来控制jQuery所做的更改，它包括一个angular2

change

事件，如下所示

<input id='input1' hidden (change)='onChange($event)'>

我通过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');
}

---

在这种情况下如何处理？

您可以将模板引用变量分配给

，比如

#hiddenInput1

，在组件类中获得其本机元素（通过

@ViewChild

），然后使用jQuery本身来侦听

更改
事件


从'@angular/core'导入{Component，ViewChild，ElementRef，AfterViewInit}；
@组成部分({
选择器：“我的应用程序”，
模板：`
我的第一个Angular 2应用程序

`
})
导出类AppComponent实现AfterViewInit{
@ViewChild（'hiddenInput1'）hiddenInput1:ElementRef；
ngAfterViewInit（）{
$（this.hiddenInput1.nativeElement）.on（'change'，（e）=>{
log（'Change-maked--ngAfterViewInit'）；
本条第1款（e）项；
});
}
onChange（）：void{
log（'Change-make-onChange'）；
}
}
Angular2更改事件通过本机
addEventListener
添加

不能使用jQuery的.trigger（'change'）触发本机事件。因此，您需要：

这样，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 {

我想说您的解决方案是有效的，但是@acdcjunior的答案似乎对我来说是更干净的解决方案。谢谢。对于输入字段，使用initEvent（'input'，true，true）触发angular2的更改事件。谢谢@CristalEmbalagens。作品我浪费了5个小时，因为我以前没有读过你的评论：）@yurzui-perfect！你在这里的回答是我解决引导事件在角度组件中可见/可见问题的关键。@CristalEmbalagens Lifesaver！谢谢你提供的这些信息！我已经搜索这个解决方案两天了。非常感谢，干得好！你救了我的命，兄弟。
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <h1>My First Angular 2 App</h1>
  <hr>
  <input id='input1' hidden #hiddenInput1>
  `
})
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');
  }

}

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

@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 {