typescript - 2向绑定(bind)角度2中组件的属性

我正在尝试发出一个指令，其中一组输入/输出字段按照with[（ngmodel）]链接为双向绑定。
以下是我要做的事情的简化版本：

@Component({
    selector: "template-for-inputbox",
    template:
    `
     <div><label>{{Label}}</label>
         <input [(ngModel)]="Value"/>
     </div>
    `
})
export class TemplateForInputBoxDirective{
    @Input() DataValue:any;
    @Output() DataChanged:EventEmitter<any> = new EventEmitter();
    get Value(){
        return this.Data;
    }
    set Value(tValue){
         //Check some things about the new value then...
         this.DataChanged.emit(tValue);
    }
}

在阅读http://victorsavkin.com/post/119943127151/angular-2-template-syntax时，我试着创建一个指令来将事情分开：

@Directive({
    selector: "[Data]",
    host: {
        "[DataValue]": "Data",
        "(DataChanged)":"DataChanging.next($event)"
    }
})
export class DataBinding {
    @Input() Data: any;
    @Output() DataChanging: EventEmitter<any> = new EventEmitter();
    ngOnInit() {
        let vData = this.Data;
    }
}

我会这样使用它：

<template-for-inputbox [(Data)]="SomeObject.Value"></template-for-inputbox>

与之相反：

<template-for-inputbox [DataValue]="SomeObject.Value"
                       (DataChanged)="SomeObject.Value = $event">
</template-for-inputbox>

对象和出现的次数使底部版本变得一团糟。
但到目前为止，只有底层版本有效，我在顶层版本中处理的值没有任何作用。

最佳答案

为了进行双向绑定，输出变量名应该是，inputVarName + 'Change'。因此，在您的示例中，它将是DataChange和输入变量Data。

export class TemplateForInputBoxDirective{
    @Input() Data:any;
    @Output() DataChange:EventEmitter<any> = new EventEmitter();
    get Value(){
        return this.Data;
    }
    set Value(tValue){
         //Check some things about the new value then...
         this.DataChange.emit(tValue);
    }
}

然后你可以像这样使用它：

<template-for-inputbox [(Data)]="SomeObject.Value"></template-for-inputbox>

只需注意，约定是对类名使用pascalcase，对变量名使用camelcase。读这些变量是如此的混乱。