web-dev-qa-db-ja.com

Angular2とjQueryの「変更」イベント

このように、angular2 changeのイベントを含む、jQueryによって行われた変更を制御する非表示の入力があります。

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

次に、私の場合、私はする必要がある jQueryを使用してこの入力の値を変更し、changeイベントをトリガーします。

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

JQueryを介してトリガーしたこのchangeイベントはjQueryでのみ機能し、Angular2では機能しません。

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

Angular2コンポーネントでは：

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

この状況でどうすれば回避できますか？

javascriptjqueryangular
16
Pho Huynh

テンプレート参照変数を<input>に割り当て、#hiddenInput1のように、コンポーネントクラス内で（@ViewChildを介して）ネイティブ要素の保持を取得し、jQuery自体を使用してchangeイベント。

Demo plunkerhere 。

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

}
17
acdcjunior

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

JQueryの.trigger（ 'change'）でネイティブイベントをトリガーすることはできません。したがって、 ネイティブイベントを作成する および それをディスパッチする が必要になります。

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

このように、angular2はonChangeハンドラーを起動します。

これが demo plunker です

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

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

いくつかの例

15
yurzui