2 - Données angulaires de passage à la composante de L'enfant après l'initialisation par le Parent

j'ai un composant parent qui reçoit des données d'un serveur via un service. J'ai besoin que certaines de ces données soient transmises à la composante enfant.

j'ai essayé de transmettre ces données avec l'habituel @Input() cependant, comme je m'y attendais les données que je reçois dans le composant Enfant est undefined .

exemple

Composant Parent

@Component({
    selector: 'test-parent',
    template: `
        <test-child [childData]="data"></test-child>
    `
})

export class ParentComponent implements OnInit {
    data: any;

    ngOnInit() {
        this.getData();
    }

    getData() {
        // calling service and getting data
        this.testService.getData()
            .subscribe(res => {
                this.data = res;
            });
    }
}

Composant Enfant

@Component({
    selector: 'test-child',
    template: `
        <!-- Content for child.... -->
    `
})

export class ChildComponent implements OnInit {
    @Input() childData: any;

    ngOnInit() {
        console.log(childData); // logs undefined
    }
}

j'ai gardé l'exemple simple pour montrer ce que j'essaie de faire. Ma question est de savoir si il est possible de transmettre des données à l'enfant après l'initialisation. Je ne suis pas sûr, mais est-ce que le fait de lier des données dans les deux sens aiderait dans ce cas?

Suite Enquête

suite aux réponses postées j'ai essayé d'utiliser le ngOnChanges cycle de vie du crochet. Le problème, c'est que la fonction ngOnChanges n'est pas activée lorsque les données sont mises à jour. Les données est un objet qui est pourquoi je pense que les changements ne sont pas détectés.

code mis à jour dans le composant enfant

@Component({
    selector: 'test-child',
    template: `
        <!-- Content for child.... -->
    `
})

export class ChildComponent implements OnChanges {
    @Input() childData: any;

    ngOnChanges() {
        console.log(childData); // logs undefined
    }
}

j'ai essayé un test avec les exemples en direct sur Plunker de L'équipe Angular montrant les crochets de cycle de vie. Dans le test j'ai mis à jour le OnChangesComponent pour passer un objet qui, comme on peut le voir dans l'exemple, lors de la mise à jour d'un objet, ngOnChanges ne détecte pas le changement. (Ceci est également indiqué dans cette question )

https://plnkr.co/edit/KkqwpsYKXmRAx5DK4cnV

semble que le ngDoCheck pourrait aider à résoudre ce problème, mais il me semble qu'il ne serait pas aider la performance à long terme que chaque changement est détecté par ce Cycle de vie du Crochet.

aussi je sais que je pourrais probablement utiliser le @ViewChild() pour accéder à la composante enfant et définir les variables dont j'ai besoin, mais je ne pense pas que pour ce cas d'utilisation, il a beaucoup de sens.

Afficher plus de code pour mieux expliquer

Composant Parent

@Component({
    selector: 'test-parent',
    template: `
        <test-child [childType]="numbers" [childData]="data" (pickItem)="pickNumber($event)">
            <template let-number>
                <span class="number" [class.is-picked]="number.isPicked">
                    {{ number.number }}
                </span>
            </template>
        </test-child>
        <test-child [childType]="letters" [childData]="data" (pickItem)="pickLetter($event)">
            <template let-letter>
                <span class="letter" [class.is-picked]="letter.isPicked">
                    {{ letter.displayName }}
                </span>
            </template>
        </test-child>
        <button (click)="submitSelections()">Submit Selection</button>
    `
})

export class ParentComponent implements OnInit {
    data: any;
    numbersData: any;
    lettersData: any;

    ngOnInit() {
        this.getData();
    }

    getData() {
        // calling service and getting data for the game selections
        this.testService.getData()
            .subscribe(res => {
                this.data = res;
                setChildData(this.data);
            });
    }

    setChildData(data: any) {
        for(let i = 0; i < data.sections.length; i++) {
            if(data.sections[i].type === 'numbers') {
                this.numbersData = data.sections[i];
            }

            if(data.sections[i].type === 'letters') {
                this.lettersData = data.sections[i];
            }
        }
    }

    pickNumber(pickedNumbers: any[]) {
        this.pickedNumbers = pickedNumbers;
    }

    pickLetter(pickedLetters: any[]) {
        this.pickedLetters = pickedLetters;
    }

    submitSelections() {
        // call service to submit selections
    }
}

Composant Enfant

@Component({
    selector: 'test-child',
    template: `
        <!--
            Content for child...
            Showing list of items for selection, on click item is selected
        -->
    `
})

export class ChildComponent implements OnInit {
    @Input() childData: any;
    @Output() onSelection = new EventEmitter<Selection>;

    pickedItems: any[];

    // used for click event
    pickItem(item: any) {
        this.pickedItems.push(item.number);

        this.onSelection.emit(this.pickedItems);
    }
}

C'est plus ou moins le code que j'ai. En gros, j'ai un parent qui s'occupe des sélections des composants enfants et ensuite je soumets ces sélections au service. J'ai besoin de transmettre certaines données à l'enfant parce que j'essaie d'avoir l'objet que l'enfant retourne dans le format que le service attendu. Cela m'aiderait à ne pas créer tout l'objet attendu par le service dans la composante parent. En outre, il permettrait à l'enfant réutilisable dans le sens qu'il renvoie ce que le service attend.

mise à Jour

je comprends que les utilisateurs sont encore en train de poster des réponses sur cette question. Notez que le code affiché ci-dessus a fonctionné pour moi. Le problème que j'ai eu était que dans un modèle particulier, j'ai eu une faute de frappe qui a causé pour les données d'être undefined .

l'Espoir qu'il s'avère être utile :)