Angular2 und jQuery ‚change‘ Ereignisse

Question

ich einen versteckten Eingang haben die Änderungen von jQuery gemacht zu steuern, die ein Ereignis von angular2 change enthält, wie diese

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

Dann in meinem Fall Ich muss verwenden jQuery Wert dieser Eingabe zu ändern, lösen dann change Ereignis:

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

dieses change Ereignis, das ich über jQuery ausgelöst nur mit jQuery funktioniert, aber nicht Angular2:

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

In angular2 Komponente:

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

Wie kann ich arbeiten, um in dieser Situation?

Answer 1

Sie könnten eine Vorlage Referenzvariable auf die <input>, wie #hiddenInput1, einen Einfluß seines nativen Elements (via @ViewChild) innerhalb der Komponentenklasse zuordnen und dann mit jQuery sich das change Ereignis zu hören.

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 Änderungsereignis wird über native addEventListener hinzugefügt.

Sie können kein natives Ereignis mit jQuery's .trigger ('change') auslösen. So müssen Sie create a native event und dispatch it:

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

Auf diese Weise angular2 onChange Handler ausgelöst.

Hier ist ein demo plunker

Als @Cristal Embalagens in Kommentaren erwähnt Sie input Ereignis für angular2 verwenden müssen, weil DefaultValueAccessor zu dieser Veranstaltung abonnieren ist:

@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