Come mantenere lo stato in angolare 2?

Question

Mi sto solo avvicinando all'angolare 2 e sto guardando la progettazione di un tipo di applicazione guidata. I componenti a pagina 1 devono comunicare i dati ai componenti su altre pagine. Pensando all'utilizzo di un servizio per mantenere lo stato/i dati che vengono iniettati nella vista/componente successiva della procedura guidata. Il tutto dovrebbe essere liberamente accoppiato. Non penso sia utile progettare uno schema osservabile perché un componente che si trova su una delle prossime pagine/viste non è ancora visibile. Quali nuove funzionalità in Angular 2 potrebbero essere utilizzate per risolvere questo?

Answer 1

check @ngrx/store

RxJS gestione dello stato alimentato ispirato Redux per Angular2 applicazioni

Answer 2

Suggerisco di mantenere il vostro stato centralizzato usando ad esempio Redux. Dovresti quindi utilizzare @Input() e @Output() di angular per propagare lo stato ai componenti e inviare le modifiche dello stato dai componenti.

Si dispone di un componente di livello superiore che sottoscrive le modifiche di stato e ne diffonde quelle che utilizzano il componente figlio @Inputs. I componenti figlio emetterebbero richieste di modifiche di stato utilizzando @Outputs() al componente di livello superiore, che a sua volta aggiorna lo stato centrale.

In questo modo il singolo componente non deve sapere nulla su come lo stato viene archiviato e aggiornato, semplicemente forniscono funzionalità e accettano parametri di input che possono avere l'effetto desiderato sulla loro funzionalità.

Se si dispone di molti componenti profondamente annidati, essi stessi utilizzano anche @Input() e @Output() per fornire la funzionalità e non comunicano direttamente con alcun archivio di stato.

Sono io che uso questo metodo e mantiene ogni componente molto snello e riutilizzabile, rendendo estremamente semplice tenere traccia del proprio stato e riduce la complessità della sincronizzazione dello stato tra i componenti.

Si dovrebbe inoltre dare un'occhiata a ChangeDetectionStrategy e ChangeDetectorRef poiché è possibile semplificare il rilevamento di modifica del componente utilizzando questo metodo. Tutti i componenti figlio possono generalmente utilizzare la cosiddetta strategia di controllo OnPush, il che significa che il rilevamento delle modifiche verrà eseguito solo quando le proprietà @Input() sono state modificate. Poiché questo è l'unico modo in cui lo stato cambierà in questo caso, puoi dire angolare non il controllo per le modifiche altrimenti. Questo aiuterà anche con le prestazioni.

Si noti che è possibile mantenere lo stato utilizzando solo un regolare servizio angular2, ma qualcosa come Redux offre alcune cose gratuitamente come ad esempio gli strumenti di sviluppo forniti. Se vai con Redux, dai un'occhiata a Immutable.js in quanto è importante non mutare lo stato direttamente usando Redux.