Quando utilizzare Observable vs EventEmitter vs Dot Rule per il rilevamento del cambiamento in angular2

Question

Esistono tre metodi che ho visto per gestire il rilevamento del cambiamento in Angular2.

1. osservabili

   @Injectable() 
   export class TodosService { 
       todos$: Observable<Array<Todo>>; 
       private _todosObserver: any; 
       private _dataStore: { 
        todos: Array<Todo> 
       }; 
   
       constructor(private _http: Http) { 
        // Create Observable Stream to output our data 
        this.todos$ = new Observable(observer => 
         this._todosObserver = observer).share(); 
   
        this._dataStore = { todos: [] }; 
       } 
   } 
   

2. EventEmitter.

   @Injectable() 
   class NameService { 
       name: any; 
       nameChange: EventEmitter = new EventEmitter(); 
       constructor() { 
       this.name = "Jack"; 
       } 
       change(){ 
       this.name = "Jane"; 
       this.nameChange.emit(this.name); 
       } 
   } 
   

3. Dot Regola

   export interface Info { 
       name:string; 
   } 
   
   @Injectable() 
   class NameService { 
       info: Info = { name : "Jack" }; 
       change(){ 
       this.info.name = "Jane"; 
       } 
   } 
   

La mia domanda è, tutte e tre le implementazioni in grado di lavorare al momento della sottoscrizione di guardare i cambiamenti nei dati. Come decidi quando usarne uno invece dell'altro e quali sono gli svantaggi di ciascuno.

Answer 1

Proviamo a darvi alcuni suggerimenti ...

Il problema principale con l'ultimo approccio è che non funziona con i tipi primitivi, ma solo con i riferimenti. Quindi non lo consiglierei ...

Penso che EventEmitter/Observable sia l'approccio giusto per implementare e gestire eventi personalizzati. È anche collegato ai componenti stessi (@Ouput), al mapping bidirezionale nei modelli (sintassi [(...)]) e alla pipe async.

Dalla documentazione, lo EventEmitter utilizza Observable ma fornisce un adattatore per farlo funzionare come specificato qui: https://github.com/jhusain/observable-spec. Dopo aver esaminato la classe EventEmitter di Angular2, estende la classe Subject. È un po 'più di un semplice Observable. Vedere questo link per maggiori dettagli: https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/subjects.md

Per quanto riguarda la creazione di un osservabile personalizzato, direi: crea i tuoi osservabili solo quando hai bisogno di qualcosa di specifico. Altrimenti, fai leva sulla classe EventEmitter. Ma ci sono molte cose che puoi fare con la classe EventEmitter e gli operatori osservabili.

Per concludere, in un caso di utilizzo così "semplice", le cose non sono così ovvie ma su scenari più complessi, EventEmitter/Observable consentono di definire una catena di gestione utilizzando gli operatori. Il campione classico è quello di aggiornare l'elenco in base a un valore per un input (qui this.term definito nel ngModel del campo):

this.term.valueChanges 
    .debounceTime(400) 
    .flatMap(term => this.dataService.getItems(term)) 
    .subscribe(items => this.items = items); 

Questo grande post da Christoph Burgdorf potrebbe darvi qualche idea su cosa osservabili può handle: http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html.

Spero che ti aiuta, Thierry