服务未在模块之间共享

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 Module 导入的共享模块 (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]
    };
  }

还要注意的是一个服务应该永远是一个共享的模块中。从文档：

虽然许多组件共享相同的服务实例，但它们依赖 Angular 依赖注入来进行这种共享，而不是模块系统。

示例的几个组件注入 UserService。整个应用程序中应该只有一个 UserService 实例，并且只有一个提供者。

UserService 是一个应用程序范围的单例。您不希望每个模块都有自己单独的实例。但是，如果 SharedModule 提供 UserService，则确实存在这种情况发生的危险。

不要在共享模块中指定应用程序范围的单例提供程序。导入共享模块的延迟加载模块会创建自己的服务副本。

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