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

我有这样的指令，它处理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);
    }
  }
}

当我模糊输入或来自服务器的数据时，我需要以某种方式添加此

$

。。。 我做的有点棘手。。。我添加了一个新的输入

serverValue

，它等于servers response

value

，并在指令中侦听它

但我认为这是一种糟糕的方式

也许有更好的方法来填充输入，监听ngModel的更改并格式化它

您可以在此处查看我的沙箱：

---

为了清楚地了解我要做什么…

您可以使用管道设置输入值的格式。像这样的

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

为什么不使用过滤器/管道，当您收到响应时，通过管道运行值。可能重复@alphapilgrim，因为我不需要更改ngModel的值，只需representation@alphapilgrim不它不是AngularJS虽然它不是AngularJS，但该指令的代码仍然具有值。您的问题标题字面上是ngModel值更改。