javascript – Angular2和jQuery’更改’事件

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

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

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

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

我通过jQuery触发的这个更改事件只适用于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事件.

Demo plunker here.

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

}