Passer des données entre les composants dans Angular 2

1. Utiliser le décorateur d’entrée pour transmettre des données des composants parent aux composants enfants dans Angular 2
2. Utilisez la sortie et EventEmitter pour transmettre des données des composants enfant aux composants parents dans Angular 2
3. Utiliser le service pour transmettre des données entre les composants dans Angular 2

Cet article vous montrera comment transmettre des données entre deux composants dans Angular 2.

Utiliser le décorateur d’entrée pour transmettre des données des composants parent aux composants enfants dans Angular 2

Parent à enfant via le décorateur Input() est utilisé lorsqu’un composant parent doit communiquer avec son composant enfant. Le composant parent envoie des données ou exécute des actions sur le composant enfant.

Il fonctionne en fournissant des données via le modèle à l’aide du décorateur @Input(). Ceci est utilisé pour modifier et suivre les paramètres d’entrée du composant.

Les exemples de code suivants montreront comment créer ce type de relation entre deux composants à l’aide du décorateur d’entrée dans Angular 2.

Code TypeScript (App.component.ts) :

import { Component } from '@angular/core';
import { Demo } from './Demo';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    DemoEx:Demo[] = [
        new Demo('First Example'),
        new Demo('SECOND Example')
    ];
}

Code TypeScript (input.component.ts) :

import { Component, OnInit, Input} from '@angular/core';
import { Demo } from '../Demo';
@Component({
    selector: 'app-demo',
    templateUrl: './input.component.html',
    styleUrls: ['./input.component.css']
})
export class inputCom implements OnInit {
    @Input() Demo: Demo;
    constructor() { }
    ngOnInit() {
    }
}

Code HTML (app.component.html et input.component.html) :

<main>
<section>
    <div class="card">
        <header>{{Demo.name}}</header>  
    </div>
</section>
</main>
<h3>Parent to child Component Interaction in Angular</h3>
<app-demo *ngFor="let Demo of DemoEx" [Demo]="Demo"></app-demo>

Cliquez ici pour vérifier la démonstration en direct du code ci-dessus.

Utilisez la sortie et EventEmitter pour transmettre des données des composants enfant aux composants parents dans Angular 2

EventEmitter est une classe qui peut émettre des événements personnalisés. Il s’agit d’un composant Angular 2 qui vous permet d’utiliser le modèle observable dans les applications Angular 2.

Ce composant offre une alternative au modèle de rappel traditionnel et simplifie le processus de déclenchement de la détection des changements en se désabonnant des observables lorsqu’ils ne sont plus nécessaires.

L’exemple suivant montre comment le composant parent s’abonne à l’événement et modifie son comportement en conséquence.

Code TypeScript (parent.component.ts) :

import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
    selector: 'parent',
    template: '<button (click)="DemoEx()">Click here to go to the next component</button>',
})
export class ParentComponent  {
    @Input() name: string;
    @Output() SampleEx = new EventEmitter<string>();
    DemoEx() {
        this.SampleEx.emit(this.message)
    }
    message: string = "You are in Child Component";
}

Code TypeScript (app.component.ts) :

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    name = 'Angular';
    message:string='';
    NextCom($event) {
        this.message = $event;
    }
}

Code HTML (app.component.html) :

<parent name="{{ name }}" (SampleEx)="NextCom($event)"></parent>
<br/>
<br/>
{{message}}

Cliquez ici pour vérifier la démonstration en direct de l’exemple ci-dessus.

Utiliser le service pour transmettre des données entre les composants dans Angular 2

Un service est une classe qui implémente l’interface Injectable. Il doit avoir des méthodes annotées avec Injectable Decorator et implémenter une ou plusieurs interfaces si nécessaire.

Un service partagé doit être utilisé lors de la transmission de données entre des composants qui n’ont pas de lien direct. Lorsque les données doivent être synchronisées tout le temps, le BehaviorSubject RxJS est très pratique.

Nous pouvons définir le nom comme un observable qui peut être modifié en utilisant la méthode the.next() en utilisant BehaviorSubject. Ensuite, nous pouvons extraire la dernière valeur en tant que données brutes à l’aide de la fonction getValue().

La valeur actuelle est enregistrée dans BehaviorSubject. Par conséquent, le composant lira toujours la valeur de données la plus récente dans BehaviorSubject.

Voir l’exemple ci-dessous.

Code TypeScript (first.component.ts) :

import { Component, OnInit } from '@angular/core';
import { SharedService } from '../demo.service';
@Component({
    selector: 'app-demo1',
    templateUrl: './first.component.html',
    styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {
    sharedData: string;
data: any;
    constructor(private sharedService: SharedService) { }
    ngOnInit() {
        this.sharedService.sharedData$
        .subscribe(sharedData => this.sharedData = sharedData);
    }
    updateData() {
        this.sharedService.setData(this.data);
    }
}

Code TypeScript (second.component.ts) :

import { Component, OnInit } from '@angular/core';
import { SharedService } from '../demo.service';
@Component({
    selector: 'app-demo',
    templateUrl: './second.component.html',
    styleUrls: ['./second.component.css']
})
export class SecondComponent implements OnInit {
    sharedData: string;
data: any;
    constructor(private sharedService: SharedService) { }
    ngOnInit() {
        this.sharedService.sharedData$
        .subscribe(sharedData => this.sharedData = sharedData);
    }
    updateData() {
        this.sharedService.setData(this.data);
    }
}

Code HTML:

<h3>2nd Component</h3>
<input type="text" [(ngModel)]="data">
<button (click)="updateData()">Save</button>
<br>
<br>
Saved Data {{ sharedData }}
<h1>Example of Unrelated Components: Sharing Data with a Service</h1>
<h3>1st Component</h3>
<input type="text" [(ngModel)]="data">
<button (click)="updateData()">Save</button>
<br>
<br>
SavedData {{ sharedData }}

L’avantage de transmettre des données entre les composants est que vous pouvez mieux comprendre votre projet en le décomposant en parties plus petites, ce qui vous permet de vous concentrer sans être accablé par les centaines de lignes de code.

Une équipe peut également fonctionner de manière plus productive si chaque développeur travaille sur des composants distincts.

Cliquez ici pour vérifier la démonstration en direct de l’exemple ci-dessus.