Angular 2中双向绑定组件的属性

Question

我正在尝试制作一个指令,其中一组输入/输出字段被链接为类似于[(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>

它出现的对象和次数使底部版本变得混乱.

但到目前为止只有最低版本正在运行,我在顶级版本中处理的值没有做任何事情.

Answer 1

为了进行双向绑定,输出变量名应为,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作为变量名.读取变量PascalCased是如此令人困惑