Angular2 - Comment partager des données / changements entre composants

Donc, disons que vous avez une interface qui a une barre d'outils, barre latérale, et une grille. La barre d'outils a une liste déroulante que lorsqu'un utilisateur modifie le contenu dans la barre latérale et de la grille des changements. De retour dans Angulaire 1, je voudrais utiliser un Service pour avoir toutes mes données dynamiques. Lorsque quelque chose change dans le service, tous les composants qui utilisent ce service sera mis à jour aussi bien.

Bien Angulaire 2, il semble que les gens se l'aide de différentes méthodes. Je voulais avoir votre opinion sur ce qui est la voie préférée.

  • Statique Service
  • OnChanges
  • Les entrées et les Sorties

Mis à jour - 03/09/16

Ressemble à la meilleure solution est le fil que Thierry Templier posté le: Délégation: EventEmitter ou Observables dans Angular2

La question que j'ai, c'est si c'est la meilleure pratique pour créer un nouveau service pour chaque élément de données est partagée entre les composants ou pouvons-nous avoir un service qui a un objet qui stocke toutes les données partagées.

See Plnkr for code


Original Plunker
 - Chaque changement aura son propre service de


Révisé Plunker par exemple
 - un Seul service qui stocke toutes les données dans l'objet. Un type sera transmis à chaque auditeur de vérifier si elle a besoin de faire tout ce qui type de.

source d'informationauteur Marin Petkov

  1. 22

    Vous pourriez tirer parti de services partagés pour cela. Il peut contenir à la fois des données et des phénomènes observables à s'y abonner pour être averti lorsque les données sont mises à jour.

    • Service

      export class ListService {
  list1Event: EventEmitter<any> = new EventEmitter();

  getLists() {
    return this.http.get(url).map(res => res.json())
      .subscribe(
        (data) => {
          this.list1Event.emit(data.list1);
        }
      );
  }
}

    • Composant

      @Component({
  selector: 'my-component1',
  template: `
    <ul>
     <li *ngFor="#item of list">{{item.name}}</li>
    </ul>
  `
})
export class MyComponent1 {
  constructor(private service:ListService) {
    this.service.list1Event.subscribe(data => {
      this.list = data;
    });
  }
}

    • bootstrap

      bootstrap(AppComponent, [ ListService ]);

    Voir cette question pour plus de détails:

  2. 2

    Dans votre cas d'utilisation, je voudrais utiliser les services. Les Services sont utilisés pour communiquer ses données à d'autres composants. Un composant peut mettre à jour ces données pour le service, et un autre composant pu lire de lui. Ou les deux composants pourrait tout lire de lui, et le serveur lui-même, il reçoit les données de l' "monde extérieur".

    Vous utilisez input de transmettre les données de la mère à l'enfant et que vous utilisez output à la sortie des événements de l'enfant de la mère.

    Vous utilisez ngOnChanges de faire quelque chose quand quelque chose change dans le composant lui-même, mais je préfère utiliser get() et set() fonctions.

    Au moins, c'est mon prendre sur elle 🙂