Angular 2服务依赖注入问题

时间:2016-11-04 11:17:23

标签: angular angular2-services

在我的应用程序中,我有一个包含两个组件的模块,ListComponent和DetailsComponent以及一个服务MyModuleService。

当用户访问ListComponet时,我从服务器获取列表并将其添加到服务的List属性中(然后我将其用作缓存)。

当用户点击列表中的任何项目时,会将其带到该项目的“详细信息”页面。

在详细信息组件中,我使用了Next和Previous链接进行导航,我使用服务的List属性来决定下一个和上一个项目。

如果用户返回列表页面,则从缓存中呈现列表,即从服务的List属性呈现。

我的列表组件还有一个搜索表单,允许用户指定搜索条件并从符合该条件的服务器中检索项目。

问题是,如果我导航到任何其他路线没有任何对上述MyModule的引用,然后回到列表页面,它不会刷新MyModuleService,这意味着它没有销毁服务实例。

可能是因为MyModuleService被添加到全局依赖注入上下文。

任何人都可以指导,我如何仅限于模块的服务范围?所以当我导航到另一条路线时,它会破坏MyModuleService实例。

2 个答案:

答案 0 :(得分:2)

  

可能是因为MyModuleService被添加到全局依赖注入上下文。

是的,this is by design

将范围限制到模块的方法是使用模块中的“顶部组件”(如给定文档链接中所述),然后在{{1} providers数组中声明服务装饰者:

@Component

这样,@Component({ selector: 'my-top-component', providers: [ MyModuleService ] }) export class MyTopComponent { } 范围将仅限于MyModuleService及其子级。但由于MyTopComponent内部有两个嵌套组件(ListComponentDetailsComponent),因此您还必须处理child routes

答案 1 :(得分:1)

要为不同的模块提供不同的服务实例,请使用providers数组。

Module1:

providers: [MyService]

Module2:

providers: [MyService]

现在这两个模块正在使用相同服务的不同实例。

如果需要,您可以在组件级别声明提供程序。这意味着该组件和任何子组件将具有该服务的单个实例的实例。

如果您希望整个应用只使用一次服务实例,请在顶级模块的providers数组中提供。