angular2 passare ngModel ad un bambino di componente

Ho ParentComponent e un ChildComponent, e ho bisogno di passare il ngModel in ParentComponent per ChildComponent.

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

come posso ottenere il valore di ngModel in ChildComponent e manipolare?

Si può fare un @Input() sulla componente figlio, e di iniettare il padre <bambino-componente [yourinput]=”someVariable”/>

OriginaleL’autore Ibraheem Al-Saady | 2016-12-27

2 Replies
  1. 15

    È necessario implementare ControlValueAccessor nella classe di bambini.
    È ciò che definisce il componente come “di valore” che può essere associato all’utilizzo angolare.

    Leggi di più qui: http://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

    Che è esattamente quello che stavo cercando, grazie
    Ovunque ho guardato, mi è sembrato che ho trovato una soluzione che ha richiesto un forte attacco di un evento onChange del padre, per tutto il tempo sapendo che ci doveva essere un modo per creare un componente che non ha bisogno di nulla di tutto ciò. Ho upvote voi con tutto il mio cuore di leone.

    OriginaleL’autore Amit

  2. 1

    Per la Capogruppo -> Bambino, utilizzare @Input

    Per Bambino -> Padre, utilizzare @Uscita

    Modo di usare entrambi:

    Nel Componente principale

    Dattiloscritto:

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

    Html

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

    Nel Bambino Componente

    Dattiloscritto:

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

    Esempio Completo

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

    Altri modi per realizzare questo:

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

    che cosa succede se il ngModel proprietà nome cambiato? poi dovrò cambiare il ChildComponent, sono di destra?
    controllare l’aggiornamento @IbraheemAl-Saady

    OriginaleL’autore Sumama Waheed

Lascia un commento