Angular X指令：處理ngModel值更改的最佳方法

Question

我有這樣的指令，它處理onBlur / onFocus更改並將$符號添加到輸入值的開頭：

@Directive({
  selector: "[inputChanger]",
  host: {
    "(focus)": "onFocus($event)",
    "(blur)": "onBlur($event)"
  }
})
export class InputChangerDirective implements OnChanges {
  @Input("inputChanger") type: string;

  @Input() serverValue: string;

  constructor(private model: NgModel, private el: ElementRef) {}

  ngOnChanges(changes) {
    if (changes.serverValue && changes.serverValue.currentValue) {
      setTimeout(() => {
        this.el.nativeElement.dispatchEvent(new Event("blur"));
      });
    }
  }

  onFocus(element: any) {
    element.target.value = this.model.model || "";
  }

  onBlur(element: any) {
    if (Number(this.model.model)) {
      element.target.value = "$" + Number(this.model.model);
    }
  }
}

當我blur我的輸入或來自服務器的數據到來時，我需要以某種方式添加此$ ...我做起來有些棘手...我添加了一個新的輸入serverValue ，它等於服務器的響應value並收聽在指令中。

但是我認為這是一個不好的方法。

也許有更好的方法來填充輸入，偵聽ngModel的更改並設置其格式？

您可以在這里檢查我的沙箱： https ： //codesandbox.io/s/18qlqny42q ，以清晰了解我的工作方式...

Answer 1

您可以使用管道來格式化輸入值。 像這樣

<input type="text" (ngModel)="model" [value]="text | pipe" />