模型加载后触发 Angular 2 属性指令答案

【问题标题】：Firing an Angular 2 Attribute Directive after model load模型加载后触发 Angular 2 属性指令
【发布时间】：2017-03-15 06:43:41
【问题描述】：

我正在尝试创建一个始终显示 3 位小数的数字输入。因此，如果值 1.1 将显示为 1.100。我创建了一个响应模糊事件的指令，它运行良好，但是如果 ngModel 在加载时传递一个值，我将无法触发格式化。

当我检查 ngOnInit 中的 DOM 元素值时，它还没有设置。我尝试从模型本身捕获值，而不是在 Init 函数中设置 DOM 元素值的 DOM，但是在 init 事件之后，它会被非 3 位小数的值覆盖。

下面的代码演示了这一点（一个未填充的数字 3 加载到输入中，如果单击进出，值将更改为 3.000：https://embed.plnkr.co/L1wxZN8n8tGvWU51KLcj/

在模型值被传播到第一次输入后，我找不到要绑定的事件。我想我可以使用超时，但我想我会问我是否错过了 Angular 2 中的一些基本概念。

【问题讨论】：

标签： angular

【解决方案1】：

实现将在触发 ngOnInit 后触发的 DoCheck 生命周期钩子。您可以使用此生命周期挂钩来触发 angular2 初始化失败的更新。

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

}

【讨论】：

我实际上只是在玩弄那个事件。它似乎被解雇了很多，然后最终真正影响了盒子的输入功能。在我检测到我想要的更改后，是否可以取消注册事件处理程序？

【解决方案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;
        }
    }
}

【讨论】：

【解决方案3】：

尝试使用AfterViewChecked 钩子：

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

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

    private el: HTMLInputElement;

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

    ngOnInit() {
        this.onBlur(0);
    }

    ngAfterViewChecked() {

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

}

【讨论】：