@HostListener（ 'change'）が機能しない - Angular2 RC1

Question

フォームの入力に使用する属性ディレクティブmyOptionalを作成しました。その目的は、特定のフィールドがオプションであることを示すことです。これは入力にクラスを追加することによって行われ、オプションテキストはCSS疑似要素::afterを使って表示されます。

「オプション」ラベルは、入力の値が空で、フォーカスが他の場所にある場合にのみ表示されることを意味します。

ので、ディレクティブが初期化されるとき、私たちはフォーカスオン

ngOnInit() { 
    this.addOptionalClass(); 
} 

入力にクラスを追加し、我々は場合は、オプションのラベルに、したがって、ぼかしオン

@HostListener('focus') onfocus() { 
    this.removeOptionalClass(); 
} 

をクラスを削除し、入力値はまだ空ですが、ラベルを表示しました

@HostListener('blur') onblur() { 
    if (this.isInputElement()) { 
     let inputValue = (<HTMLInputElement>this.el).value; 
     if (inputValue === '') this.addOptionalClass(); 
    } 
} 

これまでのところ、とても良いです。この問題は、フォームのコントロールを更新して入力値を設定した場合に発生します。その場合、入力値が更新され、空でない場合、クラスを削除したいと思います。

イベントリスナーをonchangeイベントにアタッチできると仮定しましたが、以下のコードはまったくトリガーされません。私もdocument.getElementBydIdを使って入力の値を修正しようとしましたが、成功しませんでした。

@HostListener('change') onchange() { 
    console.log((<HTMLInputElement>this.el).value); 
} 

私は自分自身を明確にしました。どんな助けでも大歓迎です。

Answer 1

私は最終的に、入力として、コントロールの値を渡すことによって、これを解決しました。 次に、ngOnChangesライフサイクルフックで、入力が評価され、クラスに値があるかどうかに基づいてクラスが追加/削除されます。

export class OptionalDirective implements OnInit, OnChanges { 
    @Input('myOptional') private controlValue: string; 

    constructor(private elementRef: ElementRef) { 
     this.el = elementRef.nativeElement; 
    } 

    ngOnChanges(changes: { [propName: string]: SimpleChange }) { 
     if (changes['controlValue'] && 
      !changes['controlValue'].isFirstChange() 
      && changes['controlValue'].currentValue !== changes['controlValue'].previousValue) { 
      if (this.controlValue) this.removeOptionalClass(); 
      else this.addOptionalClass(); 
     } 
    } 
} 

Answer 2

あなたは正しいですが、「変更」は機能しません。カント本当にwhay言うが、GitHubのレポにこれを見つけた：https://github.com/angular/angular/issues/4593

はからkeyup使用してそれを行うにはどのようにこのplunkerを参照してください：https://plnkr.co/edit/kIHogCxQaPPRQyqDVqTE?p=preview

import {Component, NgModule, HostListener, Directive} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 

@Directive({ 
    selector: 'input[myOptional]' 
}) 
export class OptionalDirective { 

    // THIS WILL BE FIRED IF SOMEONE CHANGES THE INPUT 
    @HostListener('keyup', ['$event']) 
    inputChanged(event) { 
    if (event.target.value) { 
     console.log('not empty!'); 
     // REMOVE YOUR CLASS HERE 
    } 
    else // ADD YOUR CLASS HERE 
    } 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <input myOptional /> 
    </div> 
    `, 
}) 
export class App { 
    constructor() { 
    this.name = 'Angular2' 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App, OptionalDirective ], 
    bootstrap: [ App ] 
}) 
export class AppModule {}