web-dev-qa-db-fra.com

Comment transmettre des données entre deux composants dans Angular 2

Je cherche une solution pour transmettre des données à un autre composant et, de la même manière, accéder aux méthodes d'un autre composant dans un autre (les deux sont des composants parallèles).

Par exemple, j'ai deux composants home.ts et map.ts. Je reçois des données dans map.ts et je dois les transmettre dans home.ts et vice versa.

angularcomponentsshared-data
16
Ajay Dubey

Vous pouvez transférer des données en utilisant le service.

Créez un service contenant les données lorsque vous changez de composant. Ci-dessous un exemple. 

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

@Injectable()
export class TransfereService {

  constructor(
    private router:Router,
    private companyServiceService:CompanyServiceService
  ) { }

  private data;

  setData(data){
    this.data = data;
  }

  getData(){
    let temp = this.data;
    this.clearData();
    return temp;
  }

  clearData(){
    this.data = undefined;
  }

}

Considérons maintenant 2 composants Sender et Reciever.

Code de l'expéditeur: Ce code définit les données sur le service et navigue vers le destinataire.

import { Router } from '@angular/router';
import { TransfereService } from './services/transfer.service';

export class SenderComponent implements OnInit {         
  constructor(
    private transfereService:TransfereService,
    private router:Router) {}

  somefunction(data){
   this.transfereService.setData(data);
   this.router.navigateByUrl('/reciever');//as per router
 }
}

Reciever's Code: Ce code extrait les données du service et les efface également.

import { Router } from '@angular/router';
import { TransfereService } from './services/transfer.service';

export class RecieverComponent implements OnInit {  
 data = this.transfereService.getData();       
 constructor(
   private transfereService:TransfereService,
   private router:Router) {
      if(this.data){
        // do whatever needed
      }
      else{
        this.router.navigateByUrl('/sender');
      }
   }
}
24
Abhijit Srivastava

Vous pouvez utiliser des entrées angulaires 2 pour transmettre des données à un composant. Dans votre classe enfant, créez une variable d’entrée à l’aide du décorateur angulaire 2 @Input.

import {Component, Input} from 'angular2/core';

@Component({
  selector: 'child',
  styles: [`
  `],
  template: `
  `
})
export class ChildComponent {
  @Input() valueToPass = 0;
}

Dans votre composant parent (dans lequel vous appelez votre composant enfant, transmettez votre paramètre comme suit:

<child [valueToPass] = "value"></child>

Je vous recommande de lire cet article sur la transmission et la réception d'arguments entre composants ( https://toddmotto.com/passing-data-angular-2-components-input ).

16
noor

La transmission de données entre composants est un processus à double sens. Dans votre cas, supposons que home.ts contienne un objet nommé data. 

1.Dans le home.component.html, où vous avez utilisé <map-component></map-component>, remplacez-le par <map-component [data]="data"></map-component>.

2.Dans le fichier map.ts, ajoutez les entrées de la manière suivante:

@Input() data: string;
  1. Maintenant, vous pouvez l'utiliser dans votre code comme en tant que <p>{{data.title}}</p>

J'espère que ça aide!

9
Abhishek Kulshrestha

Utilisez sessionStorage, dans l’angle où vous voulez définir les données, écrivez-le comme 

sessionStorage.setItem("key","value");

si vous voulez stocker votre objet alors écrivez comme 

sessionStorage.setItem("key", JSON.stringify(obj));

puis le composant pour lequel vous souhaitez obtenir une valeur correcte sessionStorage.getItem("key") ou pour l'objet entier JSON.parse(sessonStorage.getKey("key");

5
Akshay Srivastava

Dans Angular2, vous pouvez communiquer entre deux composants en transmettant un objet au format HTML. 

Exemple 

home.html:

...
<map_selector [ObjectInMap]="ObjectInHome" ></map_selector>
...
2
Marco Castano

Parent à enfant: Partage de données via Input Il s'agit probablement de la méthode la plus courante et la plus simple de partage de données. Cela fonctionne en utilisant le décorateur @Input () pour permettre aux données d'être transmises via le modèle.

Child to Parent: Partage de données via ViewChild ViewChild permet à un composant d'être injecté dans un autre, donnant ainsi au parent un accès à ses attributs et fonctions. Un inconvénient, cependant, est que l’enfant ne sera disponible qu’après l’initialisation de la vue. Cela signifie que nous devons implémenter le hook AfterViewInit Lifecycle pour recevoir les données de l'enfant.

Enfant à parent: Partage de données via Output () et EventEmitter Un autre moyen de partager des données consiste à émettre des données de l'enfant, pouvant être répertoriées par le parent. Cette approche est idéale lorsque vous souhaitez partager des modifications de données qui se produisent sur des éléments tels que les clics sur les boutons, les entêtes de formulaire et autres événements utilisateur.

Dans le parent, nous créons une fonction pour recevoir le message et le mettons égal à la variable de message.

Dans l'enfant, nous déclarons une variable messageEvent avec le décorateur de sortie et la configurons comme un nouvel émetteur d'événement. Ensuite, nous créons une fonction nommée sendMessage qui émet des appels sur cet événement avec le message que nous voulons envoyer. Enfin, nous créons un bouton pour déclencher cette fonction.

Le parent peut maintenant s’abonner à cet événement message qui est émis par le composant enfant, puis exécuter la fonction de réception de message chaque fois que cet événement se produit.

Composants non liés: partage de données avec un service Lorsque vous transmettez des données entre des composants dépourvus de connexion directe, tels que des frères et sœurs, petits-enfants, etc., vous devez disposer d'un service partagé. Lorsque vous avez des données qui devraient toujours être synchronisées, je trouve le BehaviorSubject RxJS très utile dans cette situation.

Vous pouvez également utiliser un sujet RxJS standard pour partager des données via le service, mais voici pourquoi je préfère un BehaviorSubject.

Il renverra toujours la valeur actuelle lors de l'abonnement - il n'est pas nécessaire d'appeler onnextIl dispose d'une fonction getValue () pour extraire la dernière valeur sous forme de données brutes .Ve garantit que le composant reçoit toujours les données les plus récentes. . Dans le service, nous créons un BehaviorSubject privé qui contiendra la valeur actuelle du message. Nous définissons une variable currentMessage qui gère ce flux de données comme une observable qui sera utilisée par les composants. Enfin, nous créons une fonction qui appelle ensuite le BehaviorSubject pour changer sa valeur.

Les composants parent, enfant et frère bénéficient tous du même traitement. Nous injectons le DataService dans le constructeur, puis nous nous abonnons à l'observable currentMessage et lui fixons une valeur égale à la variable de message.

Maintenant, si nous créons une fonction dans l’un de ces composants, celle-ci modifie la valeur du message. Lorsque cette fonction est exécutée, les nouvelles données sont automatiquement transmises à tous les autres composants.

Référence: https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/

2
Vinayak Savale

Dans Angular 4, utilisez @Input to share un objet entre parent et enfant. Ici, les modifications apportées à megmor (dans le parent) ou à radfal (dans l'enfant) seront reflétées dans l'autre.

Parent html:

<div>   
  <zoptil [radfal]="megmor"></zoptil>
  {{megmor.pergal}}
</div>

Parent ts:

let megmor = new Kreven();
this.megmor.pergal = "warbar";

Enfant html:

<div>
  <h2>{{radfal.pergal}}</h2>
  <label>Peragl: </label>
  <input [(ngModel)]="radfal.pergal" />
</div>

Enfant ts:

@Input() radfal: Kreven;
0
unqualified