关于负载信息的指令答案

【问题标题】：Directive in on load informations关于负载信息的指令
【发布时间】：2016-07-30 04:32:27
【问题描述】：

我正在使用 Angular2，并创建了一个指令来在输入上放置掩码，如下所示：

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

它运行模糊事件。但是我希望在为每个输入加载表单上的信息时执行此操作，有人知道如何执行此操作吗？

【问题讨论】：

标签： javascript html angular

【解决方案1】：

您可以使用 ngOnInit 方法等待指令被加载。 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 为 null，您可以考虑使用 ngOnChanges 而不是 ngOnInit 来检查值何时发生变化。

您还可以发布代码中指令的调用方式

【讨论】：

谢谢迈克尔，但我不太明白。我在指令的 ngOnInit 中使用？我如何获得输入的值，因为我做了一些测试并且它被执行了很多次，并且 this.model 在 NgOnInit 上为空。