Angular 服务实例化了两次？

Question

通过执行以下操作，我以某种方式获得了一个似乎已实例化两次的服务（其属性不同步）：

@Component
export class MyComponent extends someOtherComponent {
  constructor(service: Service, service2: Service2) {
    super(service, service2);
  }

  isStateEqual() {
    return this.service.serviceState === this.service2.service.serviceState;
  }
}

@Injectable
export class Service {
  serviceState = {}
}

@Injectable
export class Service2 {
  constructor(service: Service) {}
}

这只是一个非常基本的例子，但归根结底就是这样。更准确地说：我们正在构建自己的日期选择器并扩展 NgbDatepicker 组件，该组件具有 KeyMapService（使用 NgbDatepickerService）和本地 NgbDatepickerService。
这是组件的链接：https : //ng-bootstrap.github.io/#/components/datepicker/examples

在我们的应用程序中，isStateEqual 将始终返回 false（即使在初始化组件之后），而在演示中，您可以在上面的链接中找到它始终返回 true（应该是这样）。

有谁知道为什么会这样？

提前致谢。

问候丹尼斯

Answer 1

应用程序范围的单例必须在引导模块上定义：

platformBrowserDynamic()
  .bootstrapModule(AppModule)

@NgModule({
  providers: [SingletonService1, SingletonService2],
  bootstrap: [AppComponent]
})

export class AppModule {}

来源

providedIn: 'root'或者通过在服务装饰器上设置：

@Injectable({
  providedIn: 'root',
})
export class UserService {
}

来源

Answer 2

在我的例子中，服务被实例化两次，因为我使用两种不同的方法导入服务（我的 IDE (VS2019) 通过自动生成不正确的导入来错误地帮助我）：

import { Service } from '@mycompany/mymodule' 

和

import { Service } from '../../../dist/@mycompany/mymodule/@mycompany-mymodule';

Answer 3

这取决于您在哪里声明服务的提供者 - 这决定了范围。您没有在问题中指定您在哪里完成此操作 - 例如，尝试在 AppModule 中执行此操作。