Angular 2 服务依赖注入问题答案

【问题标题】：Angular 2 Services Dependency Injection IssueAngular 2 服务依赖注入问题
【发布时间】：2016-11-04 11:17:22
【问题描述】：

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

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

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

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

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

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

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

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

谁能指导一下，我如何将服务范围限制在一个模块上？这样当我导航到另一条路线时，它会破坏 MyModuleService 实例。

【问题讨论】：

【解决方案1】：

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

限制模块范围的方法是在模块中使用“顶级组件”（如给定文档链接中所述），然后在providers 装饰器的providers 数组中声明服务：

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

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

【讨论】：

【解决方案2】：

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

Module1:

providers: [MyService]

Module2:

providers: [MyService]

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

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

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

【讨论】：