web-dev-qa-db-fra.com

angular2 passe ngModel à un composant enfant

J'ai ParentComponent et un ChildComponent, et je dois passer le ngModel de ParentComponent à ChildComponent.

// the below is in ParentComponent template
<child-component [(ngModel)]="valueInParentComponent"></child-component>

comment puis-je obtenir la valeur de ngModel dans ChildComponent et la manipuler?

angularangular2-componentsangular2-ngmodel
6
Ibraheem Al-Saady

Vous devez implémenter ControlValueAccessor dans la classe enfant . C'est ce qui définit votre composant comme "ayant une valeur" qui peut être liée à l'aide de la manière angulaire. 

En savoir plus à ce sujet ici: http://blog.iblytram.io/angular/2016/07/07/custom-form-controls-in-angular-2.html

16
Amit

Pour Parent -> Enfant, utilisez @Input

Pour Enfant -> Parent, utilisez @Output

Donc, pour utiliser les deux: 

Dans le composant parent

Manuscrit:

  onValueInParentComponentChanged(value: string) {
    this.valueInParentComponent = value;
  }

Html

<child-component 
 (onValueInParentComponentChanged)="onValueInParentComponentChanged($event)"
 [valueInParentComponent]="valueInParentComponent">
</child-component>

Dans le composant enfant

Manuscrit: 

export class ChildComponent {  
   @Input() valueInParentComponent: string;
   @Output() onValueInParentComponentChanged = new EventEmitter<boolean>();
} 

onChange(){
  this.onValueInParentComponentChanged.emit(this.valueInParentComponent);
}

Html

<input type="text" [(ngModel)]="valueInParentComponent"   
    (ngModelChange)="onChange($event)"/>

Exemple complet

https://plnkr.co/edit/mc3Jqo3SDDaTueNBSkJN?p=preview

Autres moyens d'y parvenir:

https://angular.io/docs/ts/latest/cookbook/component-communication.html

1
Sumama Waheed