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

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

1 个答案: