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 :
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!