gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 09:43:42 25 4
gpt4 key购买 nike

我在 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;
}
}

最佳答案

虽然有 (blur) Angular 组件中的输出事件,AFAIK 主机监听的对应事件不是 blur但是 focusout .所以你应该使用:

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

关于angular - HostListener onBlur 和 onFocus 没有在 angular4 中被触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49874669/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com