Angular2 de liaison de données pour le composant réutilisable personnalisé

Je veux avoir un modèle composé d'un label et textbox. Ce modèle peut être réutilisé à des endroits différents dans ma page. pour ce faire j'ai créé un MyTextComponent. Je veux savoir comment faire pour lier les valeurs des composants d'entrée.

par exemple:

MyTextComponent

import {Component, Input} from 'angular2/core';
@Component({
    selector: 'myText',
    template:`<label>{{someLabel}}</label>
                 <input id=myId type="text" [(ngModel)]=bindModelData>
                 `
})
export class MyTextComponent {
    @Input() myId : string;
    @Input() bindModelData: any;
}

MyPageComponent

import {Component} from 'angular2/core';
import {MyTextComponent} from './MyTextComponent.component'

@Component({
    template:`<myText myId="id1" bindModelData="myString1"></myText>
              <myText myId="id2" bindModelData="myString2"></myText>
              `,
    directives:[MyTextComponent]
})
export class MyPageComponent{
    myString1: string;
    myString2: string;
}

Comment puis-je lier MyTextComponent entrée ngModel à MyPageComponent variable locale?

Modifier:
Essayé après l'ajout de @Sortie, mais il ne fonctionne pas 🙁
l'interpolation dans la MyPageComponent est vide, ainsi que le journal est l'impression indéfini. Cependant, l'interpolation est de travailler pour le mytextComponent. Toutes les idées

import {Component} from 'angular2/core';
import {MyTextComponent} from './myText.component'

@Component({
    template:`<myText myId="id1" [(bindModelData)]="myString1"></myText>
              <myText myId="id2" [(bindModelData)]="myString2"></myText>
              {{myString1}}
              {{myString2}}

              <button (click)="clicked()">Click Me</button>
              `,
    directives:[MyTextComponent],
    selector:'myPage'
})
export class MyPageComponent{
    myString1: string;
    myString2: string;

    clicked(){
        console.log(this.myString1+'--'+this.myString2);
    }
}


import {Component,Input,Output,EventEmitter} from 'angular2/core';
@Component({
    selector: 'myText',
    template:`<label>{{someLabel}}</label>
                 <input id=myId type="text" [ngModel]=bindModelData (ngModelChange)="updateData($event)">
                 modeldata - {{bindModelData}}
                 `
})
export class MyTextComponent {
    @Input() myId : string;
    @Input() bindModelData: any;
    @Output() bindModelDataChanged: any = new EventEmitter();
    updateData(event) {
       console.log('some random text');
      this.bindModelData = event;
      this.bindModelDataChanged.emit(event);
    }
}

OriginalL'auteur vikash kaushik | 2016-01-25