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

这只是一个非常基本的示例，但归根结底就是这样。更准确地说:我们正在构建自己的日期选择器并扩展具有 KeyMapService(使用 NgbDatepickerService)和本地 NgbDatepickerService 的 NgbDatepicker 组件。
这里是组件的链接: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 {}

source

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

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

source