Я хочу иметь шаблон, состоящий из метки и текстового поля. Этот шаблон можно повторно использовать в разных местах на моей странице. для этого я создал MyTextComponent. Я хочу знать, как привязать разные значения к вводу компонентов.
например:
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;
}
Как связать вход MyTextComponent ngModel с локальной переменной MyPageComponent?
Edit: Пробовал после добавления @Output, но он не работал:( интерполяция в MyPageComponent пуста, а журнал печатает undefined. Однако интерполяция работает для mytextComponent. Любые идеи
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);
}
}