angularjs - 如何在整个应用程序中以 Angular 2 保存来自多个服务的数据？

Question

这是我想要实现的目标: 我有一个应用程序，我基本上希望能够从许多服务中保存数据(例如，包含日志条目列表的“记录器”服务；包含主题列表和/或样式设置；等等...)。为了简单起见，我使用 localStorage 来保存这些数据。因此，我有一个通用的“LocalStorage”服务，它定义了用于保存和加载键/值对的成员，正如人们所期望的那样。

我的问题是: 从高级设计的 Angular 来看，我应该如何从单个控制点(即设置页面上的“保存/加载”按钮)保存和加载我的应用程序数据。理想情况下，我希望能够以这样一种方式实现我的应用程序服务，即每个应用程序服务都将实现一个通用的“本地存储”接口(interface)，该接口(interface)需要在该服务中实现“保存数据”和“加载数据”方法。我正在努力解决的部分是如何遍历可能实现此“本地存储”接口(interface)的所有服务并立即调用它们的所有“保存/加载”方法。就此而言，我什至不确定这是否是正确的方法。

我对 Angular 2 还是很陌生，所以如果有人能阐明这类问题并提出明智的解决方案，我将不胜感激。谢谢!

Answer 1

我会使用全局服务(甚至可能是 LocalStorageService，但我想更特定于 UI 的服务会更合适。我使用 GlobalUserActions 作为示例:

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