Angular 2 服务依赖注入问题

Question

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

当用户访问 ListComponet 时，我从服务器获取列表并将其添加到服务的列表属性（然后我将其用作缓存）。

当用户单击列表中的任何项目时，都会转到该项目的“详细信息”页面。

在详细信息组件中，我有下一个和上一个链接的导航，我使用服务的列表属性来决定下一个和上一个项目。

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

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

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

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

任何人都可以指导，如何将服务范围限制为仅模块？这样当我导航到另一条路线时，它会破坏 MyModuleService 实例。

Answer 1

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

Module1:

providers: [MyService]

Module2:

providers: [MyService]

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

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

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

Answer 2

Probably because the MyModuleService is added to global dependency injection context.

将范围限制在模块中的方法是在模块中使用 "top component"（如给定文档 link 中所述），然后在 [=11= 中声明服务] @Component 装饰器的数组：

@Component({
    selector: 'my-top-component',
    providers: [ MyModuleService ]
})
export class MyTopComponent { }

这样，MyModuleService 范围将限制在 MyTopComponent 及其子级。但是由于 MyTopComponent 中有两个嵌套组件（ListComponent 和 DetailsComponent），因此您也必须处理 child routes。

Angular 2 Services Dependency Injection Issue