在组件之间共享数据（Angular 5，复杂的应用程序）

Question

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

例如，给定一个具有类似结构的应用程序：

• 应用
  • Login.Component
  • UserStory1.module
  • View1.component
  • View2.component
  • ExportableView.Module
    • ExportableView.component
  • UserStory2.module
  • View3.component
  • ExportableView.Module / ExportableView.component
  • CommonModule
  • CommonLanding.component

我希望View1和View2可以使用UserStory1 / LocalService服务作为该用户故事的状态源。我不希望该状态在UserStory2中可用-它应该具有自己的本地服务。

起初，只是为了使它可用，我将UserStory1 / LocalService作为app.module中的提供程序－并且可以正常工作。但是，当我将其移至UserStory1.module时，它不再起作用，每个加载的新组件都有其自己的localservice实例。

Answer 1

根据documentation，您可以在每个模块中分别将服务注册为提供程序，这将导致每个模块具有单独的实例。

例如

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

和

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

确保您未在​​任何组件内注册提供程序。

如果使用Angular CLI生成了服务，则可能会用

进行注释

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

您可能必须将其更改为

@Injectable()
MyService

Answer 2

之所以发生这种情况，是因为您正在多个模块中注册UserStory1 / LocalService。由于服务属于单例类型，因此整个应用程序中应该只有一个实例。

如果您要在app.module中注册UserStory1 / LocalService，则此内容将对应用程序中的所有组件可用。您无需再次导入其他模块。

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

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