Angular 服务不工作时组件之间的通信

我正在使用

BehaviorSubject

类来更新全局数据库中的通知数。 我有两个组件：组件通知显示通知列表，您可以将这些通知设置为已读。 header组件显示未读取通知的数量，以让用户知道他错过了网站上的某些内容。 因为有两个不同的组件，所以我使用一个服务通过它们进行通信

下面是一些片段：

通知.service.ts 通知.component.ts 问题是，即使在notification.component.ts端设置了该值，header.component.ts中检索到的值也不是好值，而是初始值，这当然不是我想要的

有人有主意吗？我已经为此挣扎了太久了

---

更新 这是html部分，非常简单：

<span class="SomeCSSClasses" *ngIf="nbNotifications > 0">{{nbNotifications}}</span>

这是在App.module中导入的原始模块。 我所经历的是创建我自己的模块，如下所示：

import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';

import { NbNotificationService } from './nb-notification.service';
@NgModule({
  providers:    [ NbNotificationService ]
})

export class NbNotificationServiceModule {
    constructor (@Optional() @SkipSelf() parentModule: NbNotificationServiceModule) {
        if (parentModule) {
          throw new Error(
            'NbNotificationServiceModule is already loaded. Import it in the AppModule only');
        }
      }

    static forRoot(): ModuleWithProviders {
        return {
          ngModule: NbNotificationServiceModule,
          providers: [
            {provide: NbNotificationService, useValue: 0 }
          ]
        };
      }
}

---

试图将此添加到AppModule，但它显示错误，如：

无法实例化循环依赖项！NbNotificationService（“[ERROR->]”）：在NgModule PagesModule in./PagesModule@-1:-1

中，既然您的服务中有通知，为什么不简单地使用getter呢

通知.service.ts header.component.ts

---

如果您的服务是在延迟加载的模块中提供的，并且您想要一个应用程序范围的单例，那么您需要实现

.forRoot（）

，并在那里提供服务，然后使用

MyModule.forRoot

在

AppModule

中导入模块

由于DI上下文在创建后无法修改，因此延迟加载的模块将为其提供程序获取一个新上下文，并且只有此模块和作为其一部分加载的其他模块才能看到提供程序的相同实例

AppModule

，非延迟加载的模块和其他延迟加载的模块将不会获得任何实例或其他实例

---

另请参见

nbNotificationsChange

未在您的类中定义。这正常吗？另外，您在ngOnInit（）中订阅，但从未取消订阅（您没有ngOnDestroy（）），这是您应该做的。@trichetriche Oopsie，这里是（更新的），忘了在我的snippet@rrdidd，我也忘了。但是我尝试了在不同的地方订阅不同的服务，结果是相同的。您在哪里注册通知服务？它是由模块提供的还是由每个组件提供的？事实是，我的服务中没有任何通知。此服务允许我处理某些错误（如果发生），并在

通知：行为子对象中创建通知对象，然后使用getter和包含通知的变量，如果需要在组件之间共享，请在新服务中为此创建服务，我的变量仍然需要是SubjectBehavior还是可以是正常的？不，让它成为“正常”变量，这会容易得多！此服务已在全局模块service.module.ts中注册。我怎样才能在没有自己模块的情况下，仅将.forRoot应用于服务通知？嗯，文档有点蹩脚。例如，您可以查看
RouterModule
的源代码，其中注册了各种提供程序，以及如何导入它
imports:[RouterModule.forRoot（ROUTES）]
。您不需要为自己的模块设置
路由
参数。我不明白。让我们举个例子：我有一个NbNotificationService和我的值，一个setter和一个getter。此服务最初导入到services.module.ts中。我是否必须创建一个NbNotificationServiceModule来实现forRoot，或者我是否可以直接使用我已经拥有的文件创建一个？您是否可以添加代码（
@NgModule（…）
，这些模块涉及到您与相关提供商的问题）对于您的问题，如果我发现错误，我将在我的答案中添加一个更正的示例？您不应该在
forRoot（）
之外的任何地方需要
提供者：[NbNotificationService，…]
，但只要它只在非延迟加载的模块中，就不会有任何影响。循环依赖问题独立于单例问题。我需要看到更多的代码才能提出建议。你能试着在这张照片上做一个最小的复制吗？在何处以及如何导入
NbNotificationServiceModule.forRoot（）
？
export class NotificationsComponent implements OnInit {

public notifications: Notification[];

constructor(public notificationService: NotificationService) {}

ngOnInit() {
    this.getAllNotifications();
}

public getAllNotifications() {
    //Receive an array of notifications to display them, passsing this code. We're in the subscribe
    var nbNotifNotRead = this.notifications.filter((notif : Notification) => notif.seen == false).length;
    this.notificationService.updateNbNotification(nbNotifNotRead); //This value is properly set
}
}

<span class="SomeCSSClasses" *ngIf="nbNotifications > 0">{{nbNotifications}}</span>

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpModule } from '@angular/http';
/* A lot of imports */

@NgModule({
  imports: [
    CommonModule,
    HttpModule,

  ],
  providers: [
    ApiService,
    CurrencyService,
    /* A lot of services */
    NbNotificationService
    ]
})

export class ServicesModule { }

import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';

import { NbNotificationService } from './nb-notification.service';
@NgModule({
  providers:    [ NbNotificationService ]
})

export class NbNotificationServiceModule {
    constructor (@Optional() @SkipSelf() parentModule: NbNotificationServiceModule) {
        if (parentModule) {
          throw new Error(
            'NbNotificationServiceModule is already loaded. Import it in the AppModule only');
        }
      }

    static forRoot(): ModuleWithProviders {
        return {
          ngModule: NbNotificationServiceModule,
          providers: [
            {provide: NbNotificationService, useValue: 0 }
          ]
        };
      }
}

notifications: Notification[];

get totalNotifications() { return this.notificationService.notifications.length; }