指令不解析初始值

Question

目前我正在研究一个指令，该指令必须在用户不关注输入字段时将数字显示为货币。在我从我的服务器重新加载数据并为输入字段提供起始值之前，这一直很好用。

每当我初始化输入字段的值时，解析都不会应用，直到用户聚焦并退出输入字段（这是正常行为）。我正在尝试应用数字格式，即使用户尚未输入（焦点）和退出（模糊）该字段。

左栏是我加载页面时的输入，右栏是我关注它并退出该栏后的输入。即使用户尚未与输入进行交互，我也需要显示正确的表示形式。

我已经尝试在构造函数和 ngInit 中应用管道，但这些点的值仍然是“0”，所以我认为我不能那样做。我还尝试绑定 ngOnChanges 生命周期和 'change' hostListener 事件，但都不起作用。

有什么方法可以让它发挥作用，或者它会成为我页面上的一个功能吗？

我的指令：

@Directive({
  selector: '[appCurrencyFormatter]'
})
export class CurrencyFormatterDirective implements OnInit, OnChanges {

    private el: HTMLInputElement;

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

    ngOnInit() {
      // This doesn't work. value at this point is an empty string.
      this.el.value = this.currencyPipe.transform(this.el.value);
    }

    @HostListener('change', ['$event.target.value'])
    ngOnChanges(changes) {
        console.log('change'); // only triggers when user changes the value.
                               // Not when value is set during initialization.
    }

    @HostListener('focus', ['$event.target.value'])
    onFocus(value) {
      this.el.value = this.currencyPipe.parse(value);
    }

    @HostListener('blur', ['$event.target.value'])
    onBlur(value) {
      this.el.value = this.currencyPipe.transform(value);
    }

}

我的html输入：

<input type="text"
       [(ngModel)]="testNumber"
       appCurrencyFormatter />

testNumber 刚刚初始化为 ngOnInit(){...}

中的值 22221

我目前使用的是最新版本的angular6。

Answer 1

那是因为指令需要时间来抓取模型。你可以尝试做这样的事情：

import { Directive, OnInit, ElementRef } from '@angular/core';

@Directive({
  selector: '[appMyDir]'
})
export class MyDirDirective implements OnInit {

  constructor(private el: ElementRef) { }

  ngOnInit() {
    setTimeout(() => {
      console.log(this.el.nativeElement.value)
    }, 0);
  }

}

Answer 2

而不是 ngOnInit 使用 ngAfterViewChecked 生命周期钩子。这确保该值已经初始化。

export class CurrencyFormatterDirective implements AfterViewChecked {
                                                   ^^^^^^^^^^^^^
 // ...

  ngAfterViewChecked() {
  ^^^^^^^^^^^^^^^
    this.el.value = this.currencyPipe.transform(this.el.value);
  }

看看这个stackblitz

有关 AfterViewChecked 的更多信息，请查看 docs。

指令不解析初始值

Directive not parsing initial value

javascript

angular-directive

angular

angular6