Comment les composants frères et sœurs peuvent-ils communiquer dans Angular 2 ?

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

Dans Angular 2, la communication entre les composants frères et sœurs peut être réalisée grâce à l'injection de dépendances et aux services partagés.

Approche de service partagé (Angular 2 RC4 et Plus tard)

L'approche recommandée consiste à créer un service partagé auquel les composants frères peuvent accéder via l'injection de dépendances. Voici un exemple :

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

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

Composant parent :

// parent.component.ts
@Component({
  providers: [SharedService],
  directives: [ChildComponent, ChildSiblingComponent]
})
export class parentComponent { }

Composants frères et sœurs :

// child.component.ts
constructor(private _sharedService: SharedService) { }
ngOnInit(): void {
  this.data = this._sharedService.dataArray;
}

// child-sibling.component.ts
constructor(private _sharedService: SharedService) {}
addData() {
  this._sharedService.insertData(this.data);
  this.data = '';
}

Avantages de ceci Méthode :

• Simple à mettre en œuvre
• Prend en charge la communication directe entre les composants frères et sœurs sans avoir besoin d'un émetteur d'événements ou de $rootScope.$broadcast
• Permet partage de données entre plusieurs composants

Remarque :

• Fournissez le service dans le composant parent uniquement, mais importez-le dans les deux composants enfants.

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!