Angular2和jQuery'更改'事件

Angular2 and jQuery 'change' events

本文关键字：事件 更改 jQuery Angular2      更新时间：2023-09-26

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

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

然后在我的情况下，我必须使用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');
}

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

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

在此处演示plunker。

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

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

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

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

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

这是一个演示plunker

正如@Cristal Embalages在评论中提到的，你需要对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 {

一些示例

相关文章：