用于操作输入文本的 Angular 4 指令

Question

我创建了一个简单的指令来修剪我的输入文本（我打算稍后扩展它的功能 - 所以请不要推荐一个简单的 onkeyup 函数），我想让一个指令起作用。

我像这样使用我的指令：

    <input type="text" class="form-control" inputTextFilter [(ngModel)]="data.name">

我的指令如下：

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

@Directive({
  selector: '[inputTextFilter]'
})

export class InputTextFilterDirective {
  value: string;

  constructor() {
    console.log('contrusted InputTextFilterDirective');
    this.value = '';
  }

  @HostListener('change')
  onChange($event) {
    console.log('in change InputTextFilterDirective');
    this.value = $event.target.value.trim();
    console.log(this.value);
  }
}

我看到构造函数消息记录到窗口，但更改消息从未出现，并且我的值从未更改（未从末尾修剪空格）。我怀疑 hostListeners 和 hostProperties 不正确，因为我看到了很多相互矛盾的例子......但无法确认正确的方法。

这有什么问题？

Answer 1

将您的指令更改为

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

@Directive({
  selector: '[inputTextFilter]'
})

export class InputTextFilterDirective {
  @Input() ngModel: string;

  constructor(private el: ElementRef) {
    console.log('constructed InputTextFilterDirective');
    (el.nativeElement as HTMLInputElement).value = '';
  }

  @HostListener('change')
  onChange() {
    console.log('in change InputTextFilterDirective');
    (this.el.nativeElement as HTMLInputElement).value.trim();
    console.log(this.ngModel);
  }
}

试试看是否有效。如果没有，请尝试将事件从“ change”更改为“ input”或“ ngModelChange”