Comment implémenter la communication entre les composants frères et sœurs dans Angular 2 ?

Communication des composants frères et sœurs dans Angular 2

Lors de la gestion du flux de données entre les composants frères et sœurs dans Angular 2, il existe plusieurs approches à considérer.

Service partagé avec injection de dépendances

La solution recommandée dans Angular 2 RC4 consiste à utiliser un service partagé via l'injection de dépendances. Voici l'implémentation :

shared.service.ts :

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

@Injectable()
export class SharedService {
  dataArray: string[] = [];

  insertData(data: string) {
    this.dataArray.unshift(data);
  }
}

parent.component.ts (composant parent) :

import {Component} from '@angular/core';
import {SharedService} from './shared.service';
import {ChildComponent} from './child.component';
import {ChildSiblingComponent} from './child-sibling.component';

@Component({
  selector: 'parent-component',
  template: `<h1 >Parent</h1>
        <div>
            <child-component></child-component>
            <child-sibling-component></child-sibling-component>
        </div>`,
  providers: [SharedService],
  directives: [ChildComponent, ChildSiblingComponent],
})
export class ParentComponent {} 

child.component.ts (composant enfant):

import {Component, OnInit} from '@angular/core';
import {SharedService} from './shared.service';

@Component({
  selector: 'child-component',
  template: `<h1 >I am a child</h1>
        <div>
            <ul *ngFor="#data in data">
                <li>{{data}}</li>
            </ul>
        </div>`
})
export class ChildComponent implements OnInit {
  data: string[] = [];
  constructor(private _sharedService: SharedService) { }
  ngOnInit(): any { this.data = this._sharedService.dataArray; }
}

child-sibling.component.ts (composant enfant frère):

import {Component} from 'angular2/core';
import {SharedService} from './shared.service';

@Component({
  selector: 'child-sibling-component',
  template: `
          <h1 >I am a child</h1>
          <input type="text" [(ngModel)]="data"/>
          <button (click)="addData()"></button>`
})
export class ChildSiblingComponent {
  data: string = 'Testing data';
  constructor(private _sharedService: SharedService) {}
  addData() {
    this._sharedService.insertData(this.data);
    this.data = '';
  }
}

Considérations clés :

1. Le fournisseur de services partagés ne doit être spécifié que dans le composant parent, pas dans les composants enfants.
2. Les composants enfants doivent toujours injecter et importer le service.
3. En cas de modification à partir d'une version bêta antérieure d'Angular 2, mettez à jour uniquement les instructions d'importation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!