Angular2 i jQuery „zmiany” wydarzenia

Question

mam ukryte wejście do kontrolowania zmian dokonanych przez jQuery, która obejmuje wydarzenie angular2 change, jak to

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

potem w moim przypadku, muszę używać jQuery zmienić wartość tego wkładu, a następnie wywołać change zdarzenie:

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

Ten change wydarzenie, że wywołane przez jQuery działa tylko z jQuery, ale nie Angular2:

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

W angular2 komponentu:

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

Jak można obejść w tej sytuacji?

Answer 1

Można przypisać zmienną referencyjną szablon do <input>, jak #hiddenInput1, dorwać jej rodzimym elementu (poprzez @ViewChild) wewnątrz klasy komponentów, a następnie użyć jQuery sam słuchać przypadku 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'); 
    } 

} 

Answer 2

Zdarzenie zmiany Angular2 jest dodawane za pośrednictwem macierzystego addEventListener.

Nie można wyzwolić zdarzenia natywnego za pomocą .trigger ("zmiana") jQuery. Więc trzeba będzie create a native event i dispatch it:

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

ten sposób angular2 zadziała onChange obsługi.

Oto demo plunker

Jak @Cristal Embalagens wymienionych w komentarzach trzeba użyć input imprezę dla angular2 ponieważ DefaultValueAccessor jest zapisanie na tej imprezie:

@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