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

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 实例。在互联网说，处理这种方式是通过宣布他们在应用层进行服务单身。但我宁愿不这样做，因为我为我的应用程序使用模块化设计，该设计旨在仅在需要时延迟加载模块；因此，我更愿意根据需要使用它们的模块和组件来组织服务。

Angular2 的分层依赖注入页面解释了如何解决相反的问题，当您需要缓存不同数据的服务实例时。但它没有解释如何完成我想要的，即在使用相同服务的不同组件之间保留数据。它给出的解释也让我认为在模块级别提供服务应该就足够了，但我仍然在我的两个组件中获得了单独的服务实例。

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

Answer 1

根据 Angular 2 文档，您想要实现的在父组件和子组件之间是可能的。

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

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

更多信息家长和孩子通过服务进行交流