Angular2 - udostępnianie danych/zmiana między komponentami

Question

Załóżmy, że masz interfejs z paskiem narzędzi, bocznym i siatkowym. Pasek narzędzi zawiera menu rozwijane, w którym po zmianie użytkownika zmienia się zawartość paska bocznego i siatki. Po powrocie do Angular 1 użyłbym usługi, aby mieć wszystkie moje dynamiczne dane. Gdy coś zmieni się w usłudze, wszystkie składniki korzystające z tej usługi również zostaną zaktualizowane.

Cóż w Angular 2 wygląda na to, że ludzie używają różnych metod. Chciałem uzyskać twój wkład, który jest preferowany.

• Static serwisowe
• OnChanges
• Wejścia i Wyjścia

---

Zaktualizowane - 03/09/16

Wygląda na to, że najlepszym rozwiązaniem jest wątek, który Thierry Templier wysłał: Delegation: EventEmitter or Observable in Angular2

Pozostało mi pytanie, czy najlepiej jest utworzyć nową usługę dla każdego elementu danych, który jest współużytkowany przez komponenty, czy też możemy mieć jedną usługę, która ma obiekt przechowujący wszystkie udostępnione dane.

See Plnkr for code 

Original Plunker - Każda zmiana będzie mieć swój własny serwis

Revised Plunker for example - Tylko jedna usługa, która przechowuje wszystkie dane w obiekcie. Typ zostanie przekazany do każdego detektora w celu sprawdzenia, czy musi on coś zrobić na podstawie tego typu.

Answer 1

Można Dźwignia Shared Service do tego. Może zawierać zarówno dane, jak i obserwowalne, aby subskrybować, aby otrzymywać powiadomienia, gdy dane są aktualizowane.

• usługi

  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); 
       } 
      ); 
      } 
  } 
  

• Komponent

  @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 ]); 
  

Zobacz to pytanie Więcej szczegółów:

• Delegation: EventEmitter or Observable in Angular2
• Delegation: EventEmitter or Observable in Angular2
• Is possible to have two template for single call service in AngularJS 2

Answer 2

W twoim przypadku użycia będę korzystać z usług. Usługi służą do przekazywania danych do innych komponentów. Jeden komponent mógłby zaktualizować te dane do usługi, a inny komponent mógłby z niego odczytać. Albo oba komponenty mogą po prostu z niego odczytać, a sam serwer pobiera dane z "zewnętrznego świata".

Używasz input do przekazywania danych z rodzica do dziecka i używasz output do wysyłania zdarzeń od dziecka do rodzica.

Używasz ngOnChanges do zrobienia czegoś, gdy coś się zmienia w samym komponencie, ale ja wolę używać do tego funkcji get() i set().

Przynajmniej takie jest moje spojrzenie na to :)