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

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试创建一个始终显示3个小数位的数字输入。所以如果1.1的值显示为1.100。我创建了一个响应模糊事件的指令，它运行良好，但如果ngModel在加载时传递一个值，则无法获取格式。模型加载后触发Angular 2属性指令

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

下面的代码演示了这种（一个未填补的3个负载输入，如果单击进出，该值将变为3.000：https://embed.plnkr.co/L1wxZN8n8tGvWU51KLcj/

我无法找到绑定到火灾事件我想我可以使用超时，但我想我会问我是否错过了Angular 2中的一些基本概念。

回答：

实现DoCheck生命周期挂钩，它将会在第一次传播在触发ngOnInit后触发，您可以使用此生命周期钩子来触发无法通过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();  
    }  
}

回答：

我实现我的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; 
     } 
    } 
}

以上是 模型加载后触发Angular 2属性指令 的全部内容， 来源链接： utcz.com/qa/263185.html

回到顶部