Увольнение угловой директивы 2 атрибута после загрузки модели

Question

Я пытаюсь создать ввод чисел, который всегда отображает 3 десятичных знака. Поэтому, если значение 1.1 будет отображаться как 1.100. Я создал директиву, которая реагирует на событие размытия, и она работает хорошо, но у меня возникают проблемы с форматированием, если ngModel передает значение во время загрузки.

Когда я проверяю значение элемента DOM в ngOnInit, он еще не установлен. Я попытался захватить значение из самой модели, а не DOM, задав значение элемента DOM в функции Init, но затем он перезаписывается после события init с не 3-значным значением знака после запятой.

Следующий код демонстрирует это (мысленный номер 3 без ведущей нагрузки на вход, если нажать и выход, значение изменится на 3.000: https://embed.plnkr.co/L1wxZN8n8tGvWU51KLcj/

Я не могу найти событие, чтобы связать к тому, что пожарам после того, как значение модели было распространено для ввода в первый раз. Предположим, я мог бы использовать таймаут, но я думал, что попрошу посмотреть, не хватает ли какой-либо базовой концепции в Angular 2.

Answer 1

Внедрить крючок жизненного цикла DoCheck, который будет запускается после запуска ngOnInit. Этот крючок жизненного цикла можно использовать для запуска обновлений, которые не удалось инициализировать угловым2.

import { Directive, HostListener, ElementRef, DoCheck } from "@angular/core"; 
 

 
@Directive({ selector: "[fixeddecimal]" }) 
 
export class FixedDecimalDirective implements DoCheck { 
 

 
    private el: HTMLInputElement; 
 

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

 
    
 
    
 
    ngDoCheck() { 
 
    let inputVal : number = +this.el.value; 
 
    this.el.value = inputVal.toFixed(3).toString(); 
 
    } 
 
    
 

 
    @HostListener("blur", ["$event.target.value"]) 
 
    onBlur(value) { 
 
    let inputVal : number = +this.el.value; 
 
    this.el.value = inputVal.toFixed(3).toString(); 
 
    } 
 

 
}

Answer 2

Я реализовал свою ngDoCheck с частным булева следить, если значение было применено.

private onLoadCheck: boolean = false; 

ngDoCheck() { 
    // check if value is applied on init 
    if (this.el.value && this.el.value > 0) { 
     if (!this.onLoadCheck) { 
      let inputVal: any = +this.el.value; 
      this.el.value = this.currencyPipe.transform(inputVal); 
      this.onLoadCheck = true; 
     } 
    } 
}