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

令人困惑

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

1 个答案: