在组件之间共享数据（Angular 5，复杂应用）答案

【问题标题】：Sharing Data between Components (Angular 5, complex app)在组件之间共享数据（Angular 5，复杂应用）
【发布时间】：2019-09-14 03:40:35
【问题描述】：

如何在我的应用中为模块中的所有组件提供服务？

例如，给定一个具有如下结构的应用：

我想要一个服务 UserStory1/LocalService，View 1 和 View2 可以使用它作为该用户故事的状态源。我不希望该状态在 UserStory2 中可用——它应该有自己的本地服务。

起初，为了让它可用，我将 UserStory1/LocalService 作为 app.module 中的提供者——这很有效。但是当我将它移到 UserStory1.module 时它不再工作，加载的每个新组件都有自己的本地服务实例。

【问题讨论】：

标签： angular

【解决方案1】：

根据documentation，您可以在每个模块中分别将您的服务注册为提供者，这将为每个模块生成一个单独的实例。

例如

@NgModule({
  providers: [
    MyService,
    ...
  ],
  ...
})
UserStory1Module

和

@NgModule({
  providers: [
    MyService,
    ...
  ],
  ...
})
UserStory2Module

确保您没有在任何组件中注册提供程序。

如果您使用 Angular CLI 生成服务，它可能会被注释

@Injectable({
 providedIn: 'root',
})
MyService

您可能需要将其更改为

@Injectable()
MyService

【讨论】：

【解决方案2】：

这是因为您在多个模块中注册 UserStory1/LocalService。由于服务是单例类型的，所以整个应用程序中应该只有一个实例。

如果您在 app.module 中注册 UserStory1/LocalService，那么这将可供应用中的所有组件使用。您无需再次导入另一个模块。

    @NgModule({
  providers: [
    LocalService
  ],
  ...
})

在这种情况下，LocalService 的范围将在其注册的模块中可用。

【讨论】：

我不认为你明白 .. 我应该明确地把 localservice 放在那里——它在 /src/app——它是 userstory1 和 userstory2 的对等点——它注册的地方每一个都是因为 userstory2 组件不知道 userstory1