typescript - 在 Angular 2 中以两种方式绑定(bind)组件的属性

Question

我正在尝试制定一个指令，其中一组输入/输出字段链接为类似于 [(ngModel)] 的双向绑定(bind)。

这是我正在尝试做的事情的简化版本:

@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>

出现的对象和次数使底层版本变得一团糟。

但到目前为止只有底层版本在工作，我在顶层版本中处理的值没有做任何事情。

Answer 1

为了进行双向绑定(bind)，输出变量名应该是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，变量名使用驼峰命名法。读变量 PascalCased 好困惑