1
votes

Angular: obtenir des données d'un enfant sans événement

En utilisant Angular 6 ici. J'ai une page qui a environ 2 composants enfants. Le premier a 2 textes d'entrée et le second a une liste déroulante. Mon composant parent n'a qu'un clic sur le bouton.

Je sais que je peux utiliser Eventemitter sur mon composant enfant et transmettre la valeur à mon parent, mais comment dois-je transmettre la valeur de mon enfant s'il n'y a pas d'événements de clic sur un bouton. J'ai essayé d'utiliser ViewChild qui fonctionne en quelque sorte mais il y a un délai jusqu'à ce que la vue soit complètement chargée. J'utilise ViewChild comme ci-dessous:

--Parent--

 Message: {{message}}
 <ct-child #child1></ct-metadata>
 <button type="button" (click)="getDataFromChild(child1)">Click Me!</button>

--Enfant--

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

@Component({
  selector: 'ct-parent',
  templateUrl: './parent.html'
})
export class ParentComponent implements OnInit  {

  constructor() { }

    message: string;

  getDataFromChild(child1): void {
    this.message = child1.message;    
  } 


  ngOnInit() {}  
}

javascript angular

4 commentaires

@Output n'est pas un événement de clic sur un bouton. Qu'essayez-vous de renvoyer d'un enfant?

@AnjilDhamala Mon parent a l'événement de clic sur le bouton, lorsque l'utilisateur appuie sur le bouton, je veux lire la valeur de la zone de texte 2 du premier composant enfant et lire la valeur de la liste déroulante du deuxième composant enfant. Par exemple, dans l'article ci-dessus, comment puis-je transmettre la valeur du message qui se trouve dans mon composant enfant à mon composant parent.

@Pvl avons-nous vraiment un gestionnaire d'événements?

Vous pouvez toujours créer un service de données partagé dans lequel tous les composants peuvent extraire et stocker des données.

3 Réponses :

-2
votes

Vous parlez à votre enfant via @Input () et parlez au parent avec @Output .

Pour votre exemple, vous récupérez le message de l'enfant en utilisant un @Output.

Voici votre composant enfant.

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    Message: {{ message }}
    <app-child (messageChanged)="onMessageChange($event)"></app-child>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  constructor() { }

  message:string;

  onMessageChange(message: string) {
    this.message = message;
  }
}

Voici à quoi votre parent doit ressembler. p>

import { Component} from '@angular/core';
@Component({
  selector: 'app-child',
  template: `
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements AfterViewInit {
  @Output() messageChanged: EventEmitter<string>();
  message = 'Hola Mundo!';

  constructor() { 
     this.messageChanged = new EventEmitter<string>();
  }

  ngAfterViewInit() {
    this.messageChanged.next(this.message);
  }
}

0 commentaires

3
votes

Si vous souhaitez simplement transmettre des données comme indiqué dans votre exemple, vous pouvez faire comme ceci

 Message: {{ child.message }}
 <app-child #child></app-child>

3 commentaires

@karen, , pouvez-vous réessayer après avoir corrigé cette faute de frappe?

Donc je l'ai débogué, et je peux voir que dans ma fonction getDataFromChild child1.message contient le texte "Child Message!". Mais quand j'essaye de l'attribuer à this.message = child1.message, cela dit que ce.message n'est pas défini. Quelque chose ne va pas avec ça? Désolé, je commence juste angular donc cela pourrait être basique.

@karen, this.message = child1.message; doit être appelé après ngViewInit

2
votes

D'après ce que j'ai compris après avoir lu votre message et vos commentaires ci-dessous, vous avez une structure comme suit dans votre parent.component.html

getDataFromChild(child1,child2) {
  dataFromChild1 = child1.getData();
  dataFromChild2 = child2.getData();
}

Lorsque vous cliquez sur le bouton, vous voulez récupérer les données de child1 et child2 dans le composant parent.

Donc, une façon de résoudre ce problème consiste à utiliser la variable de référence de modèle,

<app-child1 #child1></app-child1>
<app-chidl2 #child2></app-child2>
<button type="button" (click)="getDataFromChild(child1,child2)">Click Me!</button>

Dans votre manuscrit parent

 <app-child1></app-child1>
 <app-child2></app-child2>
 <button type="button">Click Me!</button>

Ajoutez la méthode getData () dans les ts des composants enfant1 et enfant2 et renvoyez les données requises.

3 commentaires

cela ne fonctionne pas. Voir mon code mis à jour que j'ai utilisé.

vous accédez à la propriété de message de l'enfant, qui n'est pas là. Avez-vous essayé child1.childmessage?

J'ai mis votre code dans stackblitz, stackblitz.com/ edit /… Cela fonctionne bien. Lorsque vous cliquez sur le bouton, vous obtiendrez les données dans le composant parent.