Angular nativeElement.指令中的值更改目前未反映为input/ngModelChange事件

为了替换输入的特殊字符，我最终编写了以下简单指令：

标准化输入.directive.ts

@Directive({
  selector: "[appNormalizedInput]"
})
export class NormalizedInputDirective {
  constructor(private element: ElementRef) {}

  @HostListener("keypress", ["$event"]) replaceAWithB(event): void {
    const initalValue: string = this.element.nativeElement.value;
    this.element.nativeElement.value = initalValue.replace("a", "b");
  }
}

export class AppComponent {
  model = "";

  onInput(event) {
    console.log("on input: ", event.target.value);
  }

  onModelChange() {
    console.log("On model change: ", this.model);
  }
}

这将用按键上的

b

替换

a

。这是我的示例（）：

app.component.html

<input type="text" (input)="onInput($event)" [(ngModel)]="model" (ngModelChange)="onModelChange()" appNormalizedInput/>
<br/>
<label>{{model}}</label>

一旦我输入

a

，我希望控制台输出中出现

b

，对于

型号（标签内容）也是如此，但我会得到
a
，直到按下下一个键。
问题是事件比输入的实际UI值落后一步

处理此场景的正确HostListener事件是什么？我应该如何更改该值，以便在
（输入）
和
（ngModelChange）
事件中获得新值

您应该使用ngControl，并使用所需的代理函数包装onChange事件，如下所示：

@Directive({
  selector: "[myDirective]"
})
export class Mydirective {
  constructor(private ngControl: NgControl) {}

  ngOnInit() {
    const initialOnChange = (this.ngControl.valueAccessor as any).onChange;

    (this.ngControl.valueAccessor as any).onChange = value =>
      initialOnChange(this.processInput(value));
  }

  processInput(value: any) {
    return value.replace("a", "b");
  }

  @HostListener("ngModelChange", ["$event"])
  ngModelChange(value: any) {
    this.ngControl.valueAccessor.writeValue(this.processInput(value));
  }
}

如果您仍然希望通过处理
按键事件来执行此操作，并且还希望在键入时保留光标位置，则可以尝试此选项：

@HostListener("keypress", ["$event"]) replaceAWithB(e): void {
  if (e.key === 'a') {
    const { selectionStart: start, selectionEnd: end, value: oldValue } = e.target;

    e.target.value = oldValue.slice(0, start) + 'b' + oldValue.slice(end);
    e.target.selectionStart = e.target.selectionEnd = start + 1;

    e.preventDefault();
    e.target.dispatchEvent(new KeyboardEvent('input'));
  }
}

插入构造函数
NgControl
并更改NgControl的值，而不是elementRef。您可能需要存储selectionStart和selectionEnd的位置，以避免光标始终指向末尾。有些人喜欢这个面具：