Javascript 输入元素上的Angular 2双数据绑定不工作

参考下面的代码，只要输入值发生变化，就会调用textchange函数。但是，InputMaskComponent的文本属性从未更改。不确定我的代码出了什么问题

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>

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

RootComponent.html

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

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

（012）345-678

这意味着你绑定了

• 组件类的

  属性转换为
  元素的
  值
  属性

• 将

  valueChange

  事件更改为事件处理程序

  text=$event

但是

元素不会发出

valueChange

事件

---

另请参见什么是

（输入）

，

[（值）]

？你为什么不使用

[（ngModel）]

？我同意。为什么不使用

[（ngModel）]

？@micronyks和@yurzui是对的，您应该使用

ngModel

指令进行双向绑定，但您的案例需要将其分为两部分-

[ngModel]

和

（ngModelChange）

，因为您希望在输入更改时调用函数。将

[（值）]

替换为

[ngModel]

，将

（输入）

替换为

（ngModelChange）

，一切都会像魔咒一样工作。