Question

这是我当前的设置

信息中心模块

<form id="booking-form" action="thankyou.html" method="post" autocomplete>
    <label>Show date and time
        <input type="datetime-local" name="date" required id="showdate">
    </label><br>
    <label>Number of tickets:
        <input type="number" name="tickets" min="1" max="10" required id="tickets">
    </label><br>
    <label>Number of children:
        <input type="number" name="children" min="1" max="5" required id="childrens">
    </label><br>
    <input type="submit" value="Book My Show">
    <input type="reset" value="Reset">
</form>

Homie模块

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 {
 }

正如您所看到的，我有一个由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中使用它：

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]
    };
  }
}

但是同样的行为正在发生

Answer 1

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

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

你在这里：

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

在这里：

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

另请注意，服务永远不会位于共享模块中。来自文档：

虽然许多组件共享相同的服务实例，但它们依赖于此   角度依赖注入要做这种共享，而不是   模块系统。

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

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

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

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

服务不在模块之间共享

1 个答案: