Angular Architecture & Best Practices - ziua 3

Comunicarea între componente

Dacă ierarhia componentelor e prea mare (prea multe @Input și @Output), există alternative - ambele se bazează pe subject/observable

• event bus - injectat în ambele componente care doresc să comunice; componentele fac subscribe la evenimente (nu vor ști de unde vin datele); cuplare slabă;
• observable service - un serviciu furnizează observables către componente, care pot face subscribe; vor ști de unde vin datele; cuplarea nu e la fel de slabă.

RxJS subjects:

4 feluri principale:

• Subject (generic) - componentele fac subscribe și pot primi date - doar datele care se emit de la momentul abonării
• BehaviorSubject - componentele care se abonează mai târziu pot obține date emise anterior (doar la ultima emitere)
• ReplaySubject - componentele care se abonează mai târziu pot obține toate datele emise în trecut; se poate configura cât să se poată obțină
• AsyncSubject - trimite cea mai nouă valoare (ultima) atunci când se încheie de tot emiterea.

Convenție: subject - private & observable - public

private subject: Subject<Type>;

observable: Observable<Type>;

// init

this.subject = new Subject();

this.observable = this.subject.asObservable();

// emitere eveniment

this.subject.next(obj);

// abonare

this.observable = this.subject.subscribe (data => { ... });

Event bus: folosește RxJS subjects - o componentă face subscribe la un eveniment, alta emite un eveniment (fără să știe cine va primi datele).

// ambele componente:

constructor (eventBus: EventBusService) {}

// în componenta care emite:

this.eventBus.emit (objOfChoice);

// în componenta care primește:

this.eventBusSubs = this.eventBus.on (EventType, data => {});

Dezavantaje: nu se știe cine declanșează evenimentul; mantenanța este mai dificilă; trebuie făcut și unsubscribe

Observable service: 

// în componenta care emite (DataService):

this.subject = new Subject();

this.observable = this.subject.asObservable();

this.subject.next (objToSend);

// în componenta care primește:

constructor (dataService: DataService) {}

this.subs = this.dataService.observable.subscribe (data => {});

Avantaje: se cunoaște de unde vin datele

Dezavantaje: cuplarea între observator (componenta care se abonează) și observat (care emite); trebuie făcut unsubscribe

unsubscribe ---> unsubscribe() în ngOnDestroy();

Alte variante: 

1. AutoUnsubscribe decorator - cu npm install 

  @AutoUnsubscribe()

  export class MyComponent implements OnInit, OnDestroy() { }

 // nu este nevoie de nimic în ngOnDestroy (), dar trebuie menționată metoda

2. SubSink - cu npm install 

  subs = new SubSink();

  this.subs = .... // trebuie inițializat cu fiecare subscripție nouă în ngOnInit, se vor adăuga subscripțiile

  this.subs.unsubscribe(); // trebuie apelat în ngOnDestroy