Comment puis-je faciliter la communication entre les composants frères et sœurs dans Angular 2 ?

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

Angular 2 a introduit des changements importants dans l'interaction des composants, et la transmission de données entre composants frères et sœurs peut être un problème . Voici quelques solutions viables :

Utiliser un service partagé

Une approche recommandée consiste à utiliser un service partagé. Ce service peut servir de support d'échange de données entre composants sans accès direct les uns aux autres. Voici un exemple :

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

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

// ParentComponent
import {SharedService} from './shared.service';

@Component({
  providers: [SharedService],
})
export class ParentComponent {}

// ChildComponent
import {SharedService} from './shared.service';

@Component()
export class ChildComponent {
  data: string[] = [];

  constructor(private _sharedService: SharedService) {}

  ngOnInit() {
    this.data = this._sharedService.dataArray;
  }
}

// ChildSiblingComponent
import {SharedService} from './shared.service';

@Component()
export class ChildSiblingComponent {
  data: string = 'Testing data';

  constructor(private _sharedService: SharedService) {}

  addData() {
    this._sharedService.insertData(this.data);
    this.data = '';
  }
}

En injectant le SharedService dans les deux composants enfants, ils accèdent à une structure de données commune où ils peuvent échanger des informations. Cette méthode peut également faciliter des interactions plus complexes, permettant à plusieurs composants de s'abonner aux modifications apportées aux données partagées.

Remarque :

• Inclure uniquement le fournisseur de services partagés dans le composant parent.
• Injectez le service et ses dépendances dans tous les composants nécessaires.
• Assurez la sécurité des types en utilisant des interfaces appropriées ou un typage statique.

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!