Angular2 - 指令没有更新模型

Question

我有一个关于保存数值的html输入框的指令。当用户将一个数字粘贴到文本框中时，我有一个“清除”数字的指令（去掉逗号，美元符号等）。清洁代码似乎工作正常，但是我的模型没有使用已清理的值进行更新，即使文本框显示了已清理的值。

如何使用新值更新我的模型？

Plnkr here

这里是一个精简例如：

app.ts

@Component(
@Component({ 
    selector : 'my-app', 
    template : ` 
    <div> 
    <br/> 
    <br/> 
    <p>Stack Overflow person - give focus to text box and then lose focus by clicking elsewhere in the screen. <br/>The model is not updated.</p> 
    <br/>Model value: {{ balanceAmount }} 
    <br/> 
    <br/> 
    <input type="text" [(ngModel)]="balanceAmount" myCurrencyFormatter /><br/> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    constructor(private mycurpipe: MyCurrencyPipe) { 
    this.balanceAmount = 1234567.89; 
    } 
} 

货币-格式化-Directive.ts

@Directive({ selector: "[myCurrencyFormatter]" }) 
export class MyCurrencyFormatterDirective implements OnInit { 

    private el: any; 

    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.cleanNumber(value); //"987654" ;//this.currencyPipe.transform(value); 
    } 

    cleanNumber (value: number) { 
    return 8888888; // clean logic goes here, removed for plunk example 
    } 


} 

Plnkr here

Answer 1

您需要为您的模型添加Emitter。这是在Angular 2中实现2路绑定的方式。请看一下@Output() ngModelChange = new EventEmitter();行，以及我如何使用此变量将更改发送给调用者。

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

@Directive({ selector: "[myCurrencyFormatter]" }) 
export class MyCurrencyFormatterDirective implements OnInit { 

    private el: any; 
    @Output() ngModelChange = new EventEmitter(); 

    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); // oposite of transform 
    this.ngModelChange.emit(this.el.value); 
    } 

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

    cleanNumber (value: number) { 
    return 8888888; 
    } 

}