Angular2和jQuery的“change”事件

Question

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

我有一个隐藏的输入框来控制由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');
})

在Angular 2组件中：

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

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

- Pho Huynh

Answer 1

你可以给分配一个模板引用变量，例如#hiddenInput1，在组件类中通过@ViewChild获取其本机元素，然后使用jQuery本身侦听change事件。

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

}

- acdcjunior

---

我已经搜索了两天这个解决方案。非常感谢。 - Pho Huynh

干得好！你救了我的一天，兄弟。 - cimicimi

Answer 2

Angular2的改变事件是通过本地的addEventListener添加的。

您不能使用jQuery的.trigger('change')来触发本地事件。因此，您需要创建一个本地事件并且分派它：

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

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

这里有一个演示Plunker

正如 @Cristal Embalagens 在评论中提到的那样，你需要使用 input 事件来处理 Angular2 ，因为 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 {

一些例子

- yurzui

---

我认为您的解决方案可行，但是@acdcjunior的答案对我来说似乎更加优雅。谢谢。 - Pho Huynh

使用initEvent('input', true, true)为输入字段触发更改事件，以便与Angular2配合使用。 - Cristal Embalagens

谢谢@CristalEmbalagens。好用！因为我之前没有看到你的评论，所以浪费了5个小时:) - pubkey

@yurzui 太完美了！你在这里的回答是我解决从Angular组件内部使Bootstrap事件可见/可观察的问题的关键。 - ObjectiveTC

@CristalEmbalagens 真是救星！感谢您提供这个非常棒的信息！ - Harshal Carpenter