在Angular2中，如何将不同的数据服务注入每个组件

Question

假设您有一个标准的 TodoList 应用。

有一个应用程序组件，＆＃34;提供＆＃34; TodoStore 服务，用于管理（获取/设置/修改）所有数据。

您创建 AppComponent ，其中＆＃34;提供＆＃34;这个TodoStore，你把它注入你的 TodoListComponent 。一切都按预期工作。

现在，由于某种原因，客户希望并排拥有两个 TodoListComponent 。因为组件是可重用和可组合的，所以这是一个有效的用例。

但是如何在两个组件中提供不同的 TodoStore ？或者我的设计存在根本缺陷？

Answer 1

您可以使用提供不同服务的不同组件包裹TodoListComponent。

@Component({
  selector: 'todo-list-1',
  providers: [{provide: TodoStore, useFactory: (...) => new TodoStore(...), deps: [...]}],
  template: '<todo-list></todo-list>'
})
class TodoList1Component {}

对于每个不同的商店实例，请使用不同的包装器组件。

...取决于您的商店需要如何创建（您没有提供详细信息）。