angular - 服务不在模块之间共享

Question

这是我目前的设置

仪表板模块

import { HomieService } from './homie.service';
import { ServiceService } from './service.service';

@NgModule({
  imports:      [ DashboardRoutingModule, CommonModule],
  providers:    [ HomieService, ServiceService ],
  declarations: [ DashboardComponent, ValuesPipe],
  exports: [ValuesPipe]
})
export class DashboardModule { }

家庭模块

import { DashboardModule } from '../dashboard.module';

@NgModule({
  imports: [
    CommonModule,
    ...
    DashboardModule
  ],
  declarations: [HomieListComponent, HomieDetailComponent]
})
export class HomieModule {
 }

服务模块

import { DashboardModule } from '../dashboard.module';

@NgModule({
  imports: [
    CommonModule,
    ...
    DashboardModule
  ],
  declarations: [ServiceDetailComponent, ServiceListComponent]
})
export class ServiceModule {
 }

共享模块

import { ServiceService } from './service.service';
import { HomieService } from './homie.service';
import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [HomieService, ServiceService]
    };
  }
}

如您所见，我有一个由 Homie 和 Service 模块导入的共享模块 (Dashboard.module)，问题是这两个模块似乎具有不同的 HomieService 和 ServiceService 实例(我希望它们具有相同的实例两种服务的实例)

我尝试创建一个共享模块:

import { ServiceService } from './service.service';
import { HomieService } from './homie.service';
import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [HomieService, ServiceService]
    };
  }
}

并在 Dashboard.module 中使用它:

@NgModule({
  imports:      [ DashboardRoutingModule, CommonModule, SharedModule.forRoot()],
  declarations: [ DashboardComponent, ValuesPipe],
  exports: [ValuesPipe]
})
export class DashboardModule {
}

但同样的行为正在发生

Answer 1

问题是您多次注册该服务。您应该只在应用程序中注册一次服务。正如 Gunter 所说，提供者被提升到根范围并在您的所有组件之间共享。

换句话说，服务应该只在提供程序数组中列出一次。

你在这里:

@NgModule({
  imports:      [ DashboardRoutingModule, CommonModule],
  providers:    [ HomieService, ServiceService ],
  declarations: [ DashboardComponent, ValuesPipe],
  exports: [ValuesPipe]
})

在这里:

  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [HomieService, ServiceService]
    };
  }

另请注意，服务绝不能位于共享模块中。来自文档:

While many components share the same service instances, they rely on Angular dependency injection to do this kind of sharing, not the module system.

Several components of the sample inject the UserService. There should be only one instance of the UserService in the entire application and only one provider of it.

UserService is an application-wide singleton. You don't want each module to have its own separate instance. Yet there is a real danger of that happening if the SharedModule provides the UserService.

Do not specify app-wide singleton providers in a shared module. A lazy-loaded module that imports that shared module makes its own copy of the service.

如果需要，您可以将它们放入此处定义的核心模块中:https://angular.io/guide/ngmodule#the-core-module