在 Angular 指令中使用替换答案

【问题标题】：Using replace in Angular directive在 Angular 指令中使用替换
【发布时间】：2019-10-21 23:28:40
【问题描述】：

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

@Directive({
  selector: '[mpnAadharDirective]'
})
export class GeneralDirective {

  constructor(private el: ElementRef) { }

  @HostListener('keyup') keyup() {
    console.log(this.el.nativeElement.value.replace(/\d(?=\d{4})/g, "*"))
  }
}

使用上面的代码，我试图替换 nativeElement 值，但我得到了打印的值，但它没有替换。我需要一些帮助来解决这个问题。谢谢。

【问题讨论】：

replace: true 标志提出的问题多于解决方案，这就是它被删除的原因。因此，您不能再以这种方式构建 directives 并提供有效的 html 标记。唯一的解决方法是改用attribute-directive：
谢谢，我们应该使用@input 作为解决方法吗？

标签： angular angular7 angular-directive

【解决方案1】：

替换事件目标值应该可行：

@HostListener('keyup', ['$event']) keyup(event) {
  event.target['value'] = this.el.nativeElement.value.replace(/\d(?=\d{4})/g, "*");
}

【讨论】：

谢谢。当我解决这个问题时，它只打印我输入的值而不是替换。这就是问题所在。
我不确定你的问题，this is a small Stackblitz example，它似乎有效。
哇，谢谢。我遇到了干扰 ngx 掩码的一些问题。