Maison > interface Web > js tutoriel > Comment implémenter la communication entre les composants frères et sœurs dans Angular 2 ?

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

Susan Sarandon
Libérer: 2024-11-14 22:17:02
original
334 Les gens l'ont consulté

How to Implement Sibling Component Communication in 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);
  }
}
Copier après la connexion

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 {} 
Copier après la connexion

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; }
}
Copier après la connexion

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 = '';
  }
}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal