Envoyer des données au composant enfant e transmettre des données

Question

J'essaie de transmettre des données d'un composant enfant à l'élément parent (angulaire 4). Ces données proviennent d'une 'entrée de formulaire' où l'utilisateur peut insérer des informations. Malheureusement, l'information ne revient pas à l'élément parent. Je cherche une solution, quelqu'un peut m'aider? Mon code ...

envoyer des informations de l'élément parent au composant de l'enfant:

<app-fix-period 
    [fixPeriodChoices]="model.fix_period" 
    [date_time_start]="model.date_time_start" 
    [date_time_end]="model.date_time_end" 
    [begin_hour]="begin_time.hour" 
    [begin_minute]="begin_time.minute" 
    [finish_hour]="end_time.hour" 
    [finish_minute]="end_time.minute"> 
    </app-fix-period> 

sur le composant ... à la forme, je remplis les entrées avec des données utilisateur, mais rien de revenir au parent.

<div class="form-group"> 
    <label>Inicio</label> 
    <wr-calendar [(ngModel)]="date_time_start" name="date_time_start" [style]="{ width: '100%' }"> 
    </wr-calendar> 
</div> 

le composant ...

import { Component, OnInit, Output, EventEmitter } from '@angular/core'; 

@Component({ 
    selector: 'app-fix-period', 
    templateUrl: './fix-period.component.html', 
    styleUrls: ['./fix-period.component.scss'], 
    inputs: [ 
    'fixPeriodChoices', 
    'date_time_start', 
    'date_time_end', 
    'begin_hour', 
    'begin_minute', 
    'finish_hour', 
    'finish_minute' 
    ], 
    outputs: [ 
    'date_time_start', 
    'date_time_end', 
    'begin_hour', 
    'begin_minute', 
    'finish_hour', 
    'finish_minute' 
    ] 
}) 

export class FixPeriodComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { } 

} 

soo .. Je vous remercie de toute aide

Answer 1

Il y a plusieurs façons différentes, vous pouvez transmettre des informations d'un enfant à un parent.

1) Vous pouvez utiliser le décorateur @output comme indiqué ici: https://blogs.msmvps.com/deborahk/passing-data-to-and-raising-an-event-from-a-nested-component/

2) Vous pouvez utiliser un service pour conserver et transmettre les données comme indiqué ici: https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

Answer 2

Nous pouvons transmettre des données à l'enfant contrôle en utilisant l'entrée et à parent en utilisant la sortie.

Il existe plusieurs façons de partager des données en utilisant le service, assurez-vous que vous n'utilisez pas les fournisseurs sur chaque composant mais seulement dans app.module.ts, sinon chaque composant créera sa propre instance.

Pour utiliser l'entrée & décorateur de sortie voir Angular component communication by using Input Output decorator