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

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 and children communicate via a service