Question

参考下面的代码，只要输入值改变，就会调用textchange函数。但是，InputMaskComponent的text属性永远不会更改。不确定我的代码有什么问题。

InputMaskComponent.ts

import { Component, ViewChild, AfterViewInit, ElementRef, Attribute } from '@angular/core';

@Component({
    selector:'inputs:mask',
    templateUrl:'InputMaskComponent.html'
})
export class InputMaskComponent{
    pattern: string;
    text: string;
    dom: Element;
    constructor(el:ElementRef, @Attribute('pattern') pattern:string){
        this.dom = el.nativeElement;
        this.pattern = pattern;
    }
    textchange(event:any){
        console.log(this.text, event);
    }

}

InputMaskComponent.html

<div>
    <input  type="text" 
            [placeholder]="pattern" 
            (input)="textchange($event)" 
            [(value)]="text" />
    <span #child class="hidden"><ng-content></ng-content></span>
</div>

RootComponent.html

<input:mask pattern="(###) ### - ###">(012) 345 - 678</input:mask>

Answer 1

[(value)]="text"

表示你绑定

text属性为value元素的<input>属性
valueChange事件到事件处理程序text = $event

但<input>元素不会发出valueChange事件。

另见https://angular.io/docs/ts/latest/guide/template-syntax.html#!#two-way

输入元素上的Angular 2双数据绑定不起作用

1 个答案: