Angular 4 指令来操作输入文本答案

【问题标题】：Angular 4 directive to manipulate input textAngular 4 指令来操作输入文本
【发布时间】：2018-02-27 14:07:55
【问题描述】：

我创建了一个简单的指令来修剪我的输入文本（我计划稍后扩展它的功能 - 所以请不要推荐一个简单的 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 不正确，因为我看到了很多相互矛盾的例子......但无法确认正确的方法。

这是怎么回事？

【问题讨论】：

您可能正在寻找管道。您必须将 ngModel 解耦为 [ngModel]="data.name | trimPipe" (ngModel)="data.name=$event"
我明白你的意思 - 之后我会玩管道，但现在我认为指令应该起作用......只是无法弄清楚如何

标签： angular angular2-directives

【解决方案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”

【讨论】：

离开字段时触发change事件，但值没有更新（修剪）
尝试将其更改为ngModelChange 事件（或我的答案底部提到的input 事件）
我让它与以下内容一起工作，但它似乎有点复杂： (this.el.nativeElement as HTMLInputElement).value = (this.el.nativeElement as HTMLInputElement).value.trim( );
只要您打算在 input 元素上重用您的指令，这将起作用。您希望在哪些其他情况下修剪值？
我不确定 - 这更多的是理论（如何做）而不是实际。正如 Ploppy 上面建议的那样，我现在正在研究一个管道来做我想做的事情。

【解决方案2】：

给你：

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

@Directive({
    selector: '[trim-text]'
})
export class TrimTextDirective {
    constructor(
        private el: ElementRef,
    ) {}

    @HostListener('blur')
    // @HostListener('input')
    @HostListener('change')
    applyTrim() {
        let ele = this.el.nativeElement as HTMLInputElement;
        if (typeof ele.value === 'string') {
            ele.value = ele.value.trim();
        }
    }
}

如果您取消注释“@HostListener('input')”，您将无法写入空格（以防您想要修剪两侧并允许中间有空格）

【讨论】：

【解决方案3】：

你可以试试我创建的这个指令： https://www.npmjs.com/package/ngx-trim-directive

这是一个非常简单的事实，即 Angular 监听输入事件以实现视图到模型的绑定。

【讨论】：