HostListener onBlur 和 onFocus 没有在 angular4 中被触发

Question

我在 angular 4 中编写了一个指令，用于捕获 onFocus 和 onBlur。我可以看到我的指令在加载表单时被初始化，但是当我单击输入控件时没有看到 obBlur 或 Onfocus 触发。不知道出了什么问题。我在输入元素上设置了 ShortNumberFormatterDirective

指示

import { Directive, HostListener, ElementRef, OnInit } from "@angular/core"; 
//import { MyCurrencyPipe } from "./my-currency.pipe"; 


 @Directive({ selector: "[shortNumberFormatter]" }) 
 export class ShortNumberFormatterDirective implements OnInit { 


   private el: HTMLInputElement; 


   constructor( 
     private elementRef: ElementRef, 
    // private currencyPipe: MyCurrencyPipe 
   ) { 
     this.el = this.elementRef.nativeElement; 
   } 


   ngOnInit() { 
     //this.el.value = this.currencyPipe.transform(this.el.value); 
   } 


   @HostListener("focus", ["$event.target.value"]) 
   onFocus(value) { 
     //this.el.value = this.currencyPipe.parse(value); // opossite of transform 
   } 


   @HostListener("blur", ["$event.target.value"]) 
   onBlur(value) { 
     //this.el.value = this.currencyPipe.transform(value); 
   } 


 } 

html

 <tr *ngFor="let item of domicileInfo.taxAssesment.items; let last = last; let item_IDX = index">
            <td *ngIf="!last" >
                <click-input   [classNames]="{'has-warning': !isMinValid(item,item_IDX) }">
                    <!-- <input [(ngModel)]="item.minSize"  (ngModelChange)="modelChanged(item,item_IDX)" required min="0" max="999999999999999" numberFormat="shortNumberFormat:.0"> -->
                     <input [(ngModel)]="item.minSize" shortNumberFormatter required min="0" max="999999999999999" numberFormat="shortNumberFormat:.0"> 
                </click-input>
              </td>

              <td *ngIf="!last">
                  <click-input  [classNames]="{'has-warning': !isMaxValid(item,item_IDX) }">
                      <!-- <input [(ngModel)]="item.maxSize"  (ngModelChange)="modelChanged(item,item_IDX)" required min="0" max="999999999999999" numberFormat="shortNumberFormat:.0"> -->
                       <input [(ngModel)]="item.maxSize"   required min="0" max="999999999999999" numberFormat="shortNumberFormat:.0"> 
                  </click-input>
              </td>  
  </tr>

根据 Thomas 的响应更新了代码。如果你注意到我写了一个解析方法。我面临的问题是，值在表单初始化时没有被转换。我在屏幕上看到例如 20000000 而不是 20M 的实际数字。我试图在 onInit 事件中初始化，但 cntrl 值似乎为空。

指示

import { Directive, HostListener } from "@angular/core";
import { NgControl } from '@angular/forms';
import { ShortNumberFormatPipe } from '../pipes/shortNumberFormat/shortNumberFormat.pipe';

@Directive({ selector: "[shortNumberFormatter]" })
export class ShortNumberFormatterDirective {
    _shortNumberPipe = new ShortNumberFormatPipe();
    get ctrl() {
        return this.ngControl.control;
    }

    constructor(
        private ngControl: NgControl
    ) { }

    ngOnInit() {
        if (this.ctrl != null && this.ctrl.value !=null) {
            const x = this._shortNumberPipe.transform(this.ctrl.value);
            console.log(x);
            this.ctrl.setValue(x);
        }
    }


    @HostListener("focus")
    onFocus() {
        const x = this._shortNumberPipe.parse(this.ctrl.value);
        console.log(x);
        this.ctrl.setValue(x);
    }

    @HostListener("blur")
    onBlur() {
        const x = this._shortNumberPipe.transform(this.ctrl.value);
        console.log(x);
        this.ctrl.setValue(x);
    }

} 

管道

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'shortNumberFormat'
})
export class ShortNumberFormatPipe implements PipeTransform {

  transform(number: any, decimals = 0) {

    if (number === null) {
      return;
    }

    number = parseFloat(number);

    if (isNaN(number)) {
      return;
    }

    if (isNaN(decimals)) {
      return;
    }

    const signPrefix = number < 0 ? '-' : '';
    number = Math.abs(number);

    if (number <= 999) { // hundreds
      number = number.toFixed(decimals);
    } else if (number >= 1000 && number <= 999999) {  // thousands
      number = (number / 1000).toFixed(decimals) + 'K';
    } else if (number >= 1000000 && number <= 999999999) { // millions
      number = (number / 1000000).toFixed(decimals) + 'M';
    } else { // billions
      number = (number / 1000000000).toFixed(decimals) + 'B';
    }

    return signPrefix + number;
  }

  parse(inputField: string)
  {
    let parsedNumber: any;

    if(inputField === '')
      return;

    let shortFormatCharector =  inputField.substr(inputField.length - 1);

    switch(shortFormatCharector)
    {
       case'k': 
      parsedNumber = parsedNumber * 1000;
      break; 
    case'M': 
      parsedNumber = parsedNumber * 1000000; 
      break; 
    case'B': 
      parsedNumber = parsedNumber * 1000000000; 
      break; 
    }
    return parsedNumber;
  }
}

Answer 1

虽然(blur)Angular 组件中有一个输出事件，但 AFAIK 对应的主机监听事件不是blurbut focusout。所以你应该使用：

@HostListener("focusout", ["$event.target.value"]) 
onBlur(value) { 
  // ...
} 

Answer 2

如果你打算在<input>元素上使用这个指令，我建议你注入NgControl元素，然后FormControl直接操作。它比使用该$event.target.value方法要干净得多。

import { Directive, HostListener } from "@angular/core";
import { NgControl } from '@angular/forms';

@Directive({ selector: "[upperLower]" })
export class UpperLowerDirective {

  get ctrl() {
    return this.ngControl.control;
  }

  constructor(
    private ngControl: NgModel
  ) { }

  @HostListener("focus")
  onFocus() {
    this.ctrl.setValue(this.ctrl.value.toUpperCase());
  }

  @HostListener("blur")
  onBlur() {
    this.ctrl.setValue(this.ctrl.value.toLowerCase());
  }

} 

现场演示