データバインド後にアクションをAngular 2で実行するにはどうすればよいですか？

Question

私はAngular 2 SPAを開発中です。私は形式のテキスト入力ONFOCUSとのonblurイベントを使用して1つのディレクティブを建てました

• つのコンポーネント
• つのディレクティブ：私のアプリケーションは、によって構成されています。フォーカスイベントでは、ドットをテキスト値に、ブラーイベントではテキスト値に1000ドットを加えます。ディレクティブの活字体のコードに続き

  import { Component } from '@angular/core'; 
  
  @Component({ 
      selector: 'counter', 
      templateUrl: './counter.component.html' 
  }) 
  export class CounterComponent { 
      numero: number; 
  
      public incrementCounter() { 
      } 
  
      ngOnInit() { 
       this.numero = 100100100; 
      } 
  } 
  

  ：コンポーネントの活字体のコードに続いて

  <div> 
      <input id="input" [(ngModel)]="numero" InputNumber /> 
  </div> 
  

  ：コンポーネントのコードに続き

  import { Directive, HostListener, ElementRef, OnInit } from "@angular/core"; 
  
  @Directive({ selector: "[InputNumber]" }) 
  export class InputNumber implements OnInit, OnChanges { 
  
      private el: HTMLInputElement; 
  
      constructor(private elementRef: ElementRef) { 
       this.el = this.elementRef.nativeElement; 
      } 
  
      ngOnInit(): void { 
       // this.el.value is empty 
       console.log("Init " + this.el.value); 
       this.el.value = this.numberWithCommas(this.el.value); 
      } 
  
      ngOnChanges(changes: any): void { 
       // OnChanging value this code is not executed... 
       console.log("Change " + this.el.value); 
       this.el.value = this.numberWithCommas(this.el.value); 
      } 
  
      @HostListener("focus", ["$event.target.value"]) 
      onFocus(value: string) { 
       this.el.value = this.replaceAll(value, ".", ""); 
      } 
  
      @HostListener("blur", ["$event.target.value"]) 
      onBlur(value: string) { 
       this.el.value = this.numberWithCommas(value); 
      } 
  
      private numberWithCommas(x) { 
       return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "."); 
      } 
  
      private escapeRegExp(str) { 
       return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1"); 
      } 
  
      private replaceAll(str, find, replace) { 
       return str.replace(new RegExp(this.escapeRegExp(find), 'g'), replace); 
      } 
  } 
  

  次のコードは、私がのために失われたフォーカスを必要とすることを除いて動作します"100.100.100"のように私の番号を示してください。 initデータのロード時にこのアクションを実行するにはどうすればよいですか？

  私は、このリンクに一つの例を追加します。Plnkr example

  おかげ

Answer 1

あなたはあなたの焦点/ noフォーカスアクションを表しブールパラメータを取りパイプを使用してこれを行うことができます。 だからあなたwriteValue方法は次のようなものになります。

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({name: 'dots'}) 
export class DotsPipe implements PipeTransform { 
    transform(value: number, hasFocus:boolean): any { 
    if(hasFocus){ 
     return value.toString().replace(/\./g,''); 
    }else{ 
     return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "."); 
    } 
    } 
} 

次に、あなたの[ngModel]にパイプを適用して、変数を変更する角度のイベント(focus)と(focusout)を使用する必要があります。

<input [ngModel]="numero | dots : hasFocus" (focus)="hasFocus=true" (focusout)="hasFocus=false" (ngModelChange)="numero=$event" /> 

Answer 2

を私はあなたのディレクティブは、それはあなたのディレクティブでモデルを作成するために必要とされるControlValueAccessorインターフェイスhttps://angular.io/docs/ts/latest/api/forms/index/ControlValueAccessor-interface.html を実装する必要があることだと思います。 ControlValueAccessorインターフェイスには、最初に呼び出されるwriteValue(value: any)メソッドがあります。

private onChange: (_: any) => {}; 
... 
writeValue(val) { 
    const editedValue = this.numberWithCommas(val); 
    this._onChange(val); 
} 


registerOnChange(fn: any) : void { 
    this._onChange = fn; 
}