Yönergesi

Question

Ben Angular2 kullanıyorum ve aşağıdaki gibi ben, girişlere maskeleri koymak için bir yönerge oluşturuldu:

import {Directive, Attribute} from 'angular2/core'; 
import {NgModel} from 'angular2/common'; 

@Directive({ 
    selector: '[real]', 
    host: { 
     '(blur)': 'onInputChange()'   
    } 
}) 

export class RealDirective { 
    modelValue: string; 
    viewValue: string; 

constructor(public model: NgModel) { 
} 

onInputChange() { 
    this.modelValue = this.model.value.replace(/[^0-9\,]/g,''); 
    this.viewValue = RealDirective.format(this.modelValue); 
    this.model.viewToModelUpdate(this.modelValue); 
    this.model.valueAccessor.writeValue(this.viewValue) 
} 

static format(valor) { 

    if (valor == "") { 
     valor = "0"; 
    } 

    var valorFloat: number = parseFloat(valor.replace(",", ".")); 
    var valorString: string = valorFloat.toFixed(2).toString().replace(".", ","); 

    var valorSemCasasDecimais = valorString.substring(0, valorString.length - 3); 
    var valorArray: string[] = valorSemCasasDecimais.split(""); 

    var casa: number = 0; 

    var valorStringComPontosInvertida: string = ""; 

    for (var i = valorArray.length - 1; i > -1; i--) { 
     valorStringComPontosInvertida = valorStringComPontosInvertida + valorArray[i]; 
     casa = casa + 1; 
     if (casa == 3 && i > 0) { 
      valorStringComPontosInvertida = valorStringComPontosInvertida + "."; 
      casa = 0; 
     } 
    } 

    var valorStringComPontosInvertidaArray: string[] = valorStringComPontosInvertida.split(""); 
    var valorStringComPontosCorreta: string = ""; 

    for (var i = valorStringComPontosInvertidaArray.length - 1; i > -1; i--) { 
     valorStringComPontosCorreta = valorStringComPontosCorreta + valorStringComPontosInvertidaArray[i]; 
    } 

    var valorStringPronta: string = valorStringComPontosCorreta + valorString.substring(valorString.length - 3, valorString.length); 

    return valorStringPronta; 
} 
} 

Bu bulanıklık olayı çalışır. Ancak, her bir girdi için formdaki bilgilerin yüklenmesi üzerine çalışmayı isterim, bunun nasıl yapılacağı konusunda herhangi bir fikri olan var mı?

Answer 1

Yönergenin yüklenmesini beklemek için ngOnInit yöntemini kullanabilirsiniz. Örneğin https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

:

@Directive({ 
    selector: '[real]', 
    host: { 
     '(blur)': 'onInputChange()'   
    } 
}) 

export class RealDirective { 
    modelValue: string; 
    viewValue: string; 

    constructor(public model: NgModel) { 
    } 
    ngOnInit():void { 
    console.log(this.model); 
    } 
} 

this.model Eğer değer değişirken kontrol etmek yerine ngOnInit ait ngOnChanges kullanmayı düşünebilirsiniz null ise.

Ayrıca, yönergeleriniz kodunuzda nasıl çağrılacağını da yazdırabilirsiniz