How to save data from multiple services in angular 2 for the whole application?

Question

Here I am trying to achieve: I have an application in which I basically want to be able to save data from several services (for example, the "logger" service, which contains a list of log entries; the "service" service, which contains a list of topics and / or settings style, etc.). For simplicity, I use localStorage to store this data. Thus, I have a shared service called LocalStorage that defines the members to save and load key / value pairs, as you would expect.

My question: From the point of view of high-level design, how can I approach saving and loading data of my application from one control point (ie. "Save / load" button on the settings page). Ideally, I would like to implement my application applications in such a way that each of them implements a common “local storage” interface, which will require the use of the Save Data and Load Data methods in this service. The part I'm struggling with is how to iterate over all the services that can implement this "local storage" interface, and at the same time call all of their save / load methods. In this regard, I’m not even sure that this is the right approach.

I'm still pretty new to Angular 2, so if someone could shed some light on this problem and suggest a reasonable solution, it would be quite helpful. Thanks!

Answer 1

I would use a global service (there might even be a LocalStorageService , but I assume a more suitable user interface would be more appropriate. I use GlobalUserActions as an example:

 @Injectable() export class GlobalUserActions { // Subject would be better but I don't know TS/RxJS well enough // EventEmitter should only be used for @Output() saveAll:EventEmitter = new EventEmitter(); doSaveAll() { saveAll.emit(null); // or any information that might be useful to components } } 

 @Component({ selector: 'any-com', ... }) export class AnyComponent { constructor( private globalUserActions: GlobalUserActions, private persistenceService: PersistenceService) { this.globalUserActions.saveAll.subscribe(save); } save(value) { this.persistenceService.save(...); } } 

 bootstrap(AppComponent, [ ... , LocalStorageService, // use a generic `PersistenceService` but provide a concrete // `LocalStorageService` provide(PersistenceService, {useExisting: LocalStorageService}) ]);