2-полосная привязка свойства компонента в угловом 2

Question

Я пытаюсь создать директиву, в которой один набор полей ввода/вывода связан как 2-сторонняя привязка в соответствии с [(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 для имен классов и верблюжьего для имен переменных. Сложно читать переменные PascalCased