Я использую класс BehaviorSubject
для обновления количества уведомлений в моем файле global. У меня есть 2 компонента: уведомление компонента показывает список уведомлений, и вы можете установить эти уведомления как прочитанные. Компонент шапки показывает количество уведомлений, которые не прочитаны, чтобы дать пользователю понять, что он что-то пропустил на сайте. Поскольку есть 2 разных компонента, я использую сервис для связи через них.
Вот какой-то фрагмент:
уведомление.service.ts
export class NotificationService {
public notification: BehaviorSubject<Object> = new BehaviorSubject<Object>({});
public nbNotificationsChange: BehaviorSubject<number>;
constructor(){
this.nbNotificationsChange = new BehaviorSubject<number>(0);
}
updateNbNotification(value) {
this.nbNotificationsChange.next(value);
this.nbNotificationsChange.subscribe(x => console.log(x));
}
getNbNotification(){
return this.nbNotificationsChange.getValue();
} }
header.component.ts
export class HeaderComponent implements OnInit, DoCheck {
public notifications: Notification[] = [];
public nbNotifications: number = 0;
constructor (public notificationService: NotificationService){
this.notificationService.nbNotificationsChange.subscribe(value => {
this.nbNotifications = value;
});
}
ngOnInit() {
this.getNotificationsNotRead();
this.notificationService.nbNotificationsChange.subscribe(value => {
this.nbNotifications = value;
});
}
ngDoCheck(){
this.nbNotifications = this.notificationService.getNbNotification()
//console.log("test");
}
getNotificationsNotRead(){
aNotRelevantFunctionToRetreiveNotification.subscribe(
this.notifications = //Receive an array of Notifications here with some code
this.notifications = this.notifications.filter((notif : Notification) => notif.seen == false); // Check if a notification is read or not
this.notificationService.updateNbNotification(this.notifications.length);
console.log(this.notifications.length);
);
}
get nbNotif(): number {
return this.notificationService.getNbNotification();
} }
уведомление.component.ts
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
}
}
Проблема в том, что даже если значение установлено на стороне уведомления.component.ts, значение, полученное в header.component.ts, не является хорошим и является исходным, ведь это не то, что я хочу, конечно.
У кого-нибудь есть идея? Боролся с этим слишком долго
Обновлять
Вот часть html, которая очень проста:
<span class="SomeCSSClasses" *ngIf="nbNotifications > 0">{{nbNotifications}}</span>
Обновление 2
В модуле участвовали:
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 { }
Это исходный модуль, который импортируется в 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, но выдает ошибку типа: Cannot instantiate cyclic dependency! NbNotificationService ("[ERROR ->]"): in NgModule PagesModule in ./PagesModule@-1:-1
nbNotificationsChange
не определено в вашем классе. Это нормально? - person   schedule 12.03.2018