2ウェイ・アングル2のコンポーネントのプロパティをバインドする

Question

[（ngModel）]のように、1組の入力/出力フィールドが2ウェイ・バインディングのようにリンクされているディレクティブを作成しようとしています。ここで

は私が何をしようとしているの簡易版です：http://victorsavkin.com/post/119943127151/angular-2-template-syntaxを読んでいる間

@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); 
    } 
} 

私は物事を分割するディレクティブを作成しようとした：私はそれを使用することになり

@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を読むのがとても戸惑う