Angular2和jQuery「變」事件

我有一個隱藏的輸入來控制的jQuery，其中包括angular2 change的情況下，取得這樣的Angular2和jQuery「變」事件

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

然後在我的情況的變化，我必須使用jQuery更改此輸入的值，則觸發事件change：

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

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

我怎麼能在這種情況下解決？

來源

2016-07-24 Po Béo

你可以一個模板引用變量分配到<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'); 
    } 

}

來源

2016-07-25 02:02:23 acdcjunior

我我一直在尋找這個解決方案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處理程序。

這裏是一個demo plunker

如您需使用input事件angular2因爲 DefaultValueAccessor正在訂閱此事件的評論中提到@Cristal Embalagens：

@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

來源

2016-07-25 05:00:35 yurzui

我會說你的解決方案的作品，但@ acdcjunior的答案似乎是對我來說更乾淨的解決方案。謝謝。 –

不客氣！ – yurzui

對於輸入字段，使用initEvent（'input'，true，true）將更改事件觸發到angular2。 –

Angular2和jQuery「變」事件

回答

相關問題