强制多个组件使用同一个服务实例

Question

背景

我正在编写一个 Angular2 应用程序，我希望在其中使用多个服务来访问不同的端点。我希望每个服务都缓存其数据以减少发出的请求数量，并允许多个组件在将缓存中的数据发送到端点之前对其进行修改。

守则

@Injectable()
  export class MyService {

  private items: any;

  constructor (private http: Http) {
    this.items = [];
  }

  getItems () {
    if(!this.items) {
      return this.http.get(this.endpoint).map((data) => {
        this.items = data;
        return data;
      });
    } else {
      return Observable.of(this.items);
    }
  }

  addItem (item) {
    this.items.push(item);
  }

  saveItems () {
    return this.http.put(endpoint, this.items);
  }
}

那么 Component1 可能会这样做：

userClickedAddItem (item) {
  this.myService.addItem(item);
}

而 Component2 可能会这样做：

userClickedSave () {
  this.myService.saveItems().subscribe((items) => {
    // Do something
  });
}

然后在组件的模块中我正在做类似的事情

@NgModule({
  providers: [MyService],
  declarations: [
    Component1
    Component2
  ]
})

问题

由于 Angular2 实例化了所提供服务的各个实例，即使 Component1 调用了addItem，Component2 也认为没有添加任何项目，因为它有一个不同的 MyService 实例。 Internet 说处理这个问题的方法是通过在应用程序级别声明它们来使服务成为单例。但我宁愿不这样做，因为我正在为我的应用程序使用模块化设计，该设计旨在仅在需要时才延迟加载模块；因此，我更愿意根据需要使用它们的模块和组件来组织服务。

Angular2 在Hierarchical Dependency Injection 上的页面解释了如何解决相反的问题，当您想要缓存不同数据的服务实例时。但它没有解释如何实现我想要的，即让数据在使用相同服务的不同组件之间持久化。它给出的解释也让我认为在模块级别提供服务应该足够了，但我仍然在我的两个组件中获得服务的单独实例。

有没有办法将数据持久保存在两个组件之间共享的服务中，而无需将服务的提供者提升到应用程序模块？

Answer 1

根据 Angular 2 文档，您希望在父组件和子组件之间实现。

您在父提供者中声明服务，然后子提供者使用相同的实例。

如果您在 AppModule 中声明它，则 parent 和 child 将使用不同的服务实例。

更多信息Parent and children communicate via a service