Tengo ParentComponent y ChildComponent, y necesito pasar el ngModel en ParentComponent a ChildComponent.

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

¿Cómo puedo obtener el valor de ngModel en ChildComponent y manipularlo?

11
Ibraheem Al-Saady 27 dic. 2016 a las 21:49

3 respuestas

La mejor respuesta

Debe implementar ControlValueAccessor en la clase secundaria. Es lo que define su componente como "tener un valor" que se puede utilizar de forma angular.

Lea más sobre esto aquí: http : //blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

20
Amit 27 dic. 2016 a las 23:06

Para padre -> hijo, use @Input

Para Niño -> Padre, use @Output

Entonces, para usar ambos:

En el componente principal

Mecanografiado:

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

Html

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

En el componente secundario

Mecanografiado:

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)"/>

Ejemplo completo

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

Otras formas de lograr esto:

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

1
Sumama Waheed 27 dic. 2016 a las 19:35

Parece que está intentando ajustar un control de formulario. ¡Escribí una biblioteca que te ayuda a hacer eso! s-ng-utils tiene una superclase para usar con su componente principal: WrappedFormControlSuperclass. Puedes usarlo así:

@Component({
  template: `
    <!-- anything fancy you want in your parent template -->
    <child-component [formControl]="formControl"></child-component>
  `,
  providers: [provideValueAccessor(ParentComponent)],
})
class ParentComponent extends WrappedFormControlSuperclass<ValueType> {
  // This looks unnecessary, but is required for Angular to provide `Injector`
  constructor(injector: Injector) {
    super(injector);
  }
}

Esto supone que <child-component> tiene un ControlValueAccessor, como sugiere la respuesta de @ Amit. Si está escribiendo <child-component> usted mismo, también hay una superclase en s-ng-utils para ayudar con eso: FormControlSuperclass.

1
Eric Simonton 10 mar. 2019 a las 18:57