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
Vous devez vous connecter pour publier un commentaire.
Votre myText manque un
@Output()
alors vous pouvez l'utiliser comme
Plunker exemple
Je suppose que l'ajout de
ngOnChanges() {}
angular.io/docs/ts/latest/guide/lifecycle-hooks.html est ce que vous cherchez. Il est appelé quand une@Input()
les changements de la valeur.Est-il possible d'utiliser
ngModel
que la borne d'entrée? par exemple,<my-text [(ngModel)]="person.name"></my-text>
avec@Input() ngModel: string;
Le composant doit mettre en œuvre
ControlValueAccessor
, il peut être utilisé avec[(ngModel)]
. Il y a plusieurs réponses AFIN de le démontrer.Votre exemple est beaucoup plus intuitive que l'aide ngModel et la mise en œuvre de ControlValueAccessor. Avec la RC3 et en utilisant les nouvelles formes de l'API j'ai aussi des problèmes avec ControlalueAccessor - est-ce de travailler pour vous dans cette condition? J'ai essayé aussi la case code angulaires-le matériel, et il semble aussi avoir des problèmes avec les nouvelles formes de l'api.
OriginalL'auteur Günter Zöchbauer