Angular2とjQuery「変更」イベント

Question

私はこの

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

ようangular2 changeのイベントが含まれてjQueryのによって行われた変更を、制御するための隠し入力を持っているそして、私の場合、私はに持って

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

私はjQueryを介して、トリガこのchangeイベントは唯一のjQueryを使って動作しますが、ないAngular2：

この入力の値を変更するためのjQueryを使用し、その後、changeイベントをトリガangular2コンポーネントで

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

：

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

どのように私はこのような状況で回避できますか？

Answer 1

あなたは、#hiddenInput1のように、<input>にテンプレートの参照変数を割り当てるコンポーネントクラスの内部（@ViewChildを経由して）そのネイティブ要素のホールドを取得し、その後changeイベントに耳を傾けるのjQuery自体を使用することができます。

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

} 

Answer 2

Angular2変更イベントは、ネイティブaddEventListenerを経て追加されます。

jQueryの.trigger（ 'change'）でネイティブイベントをトリガすることはできません。だから、create a native eventとdispatch itにする必要があります：

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

この方法のangular2がonChangeハンドラを起動します。

@Cristal Embalagensあなたは DefaultValueAccessorは、このイベントにサブスクライブしているためangular2ためinputイベントを使用する必要があるコメントで述べたようにここでdemo plunker

です：

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

Some Example