Я использую rxjs и субъекты для обновления двух моих компонентов.
Я подписываюсь на тему в сервисе, но когда метод .next вызывается для субъекта, он обновляет только одиниз моих компонентов.
Приложение состоит из WebsocketService для инициализации соединения websocket, NotificationService, который использует WebsocketService для подключения к бэкенду и отправки / получения уведомлений.
У меня есть NotificationComponent, где яможет создать новое уведомление.В этом компоненте я подписался на Subject в NotificationService и отображал уведомление при его обновлении.Это прекрасно работает, сообщение доходит до серверной части и обновляется во всех браузерах, которые в данный момент имеют соединение.
Следующим шагом для меня было показать это уведомление в HeaderComponent.Я внедрил NotificationService здесь и подписался на ту же тему, однако при отправке уведомления подписка HeaderComponents не срабатывает.Сообщение console.log никогда не отображается в консоли.
WebSocketService
import { Injectable } from '@angular/core';
import { ReplaySubject, Subject, Observable, Observer } from 'rxjs/Rx';
@Injectable()
export class WebsocketService {
constructor() { }
private subject: ReplaySubject<MessageEvent>;
public connect(url): ReplaySubject<MessageEvent> {
if (!this.subject) {
this.subject = this.create(url);
console.log("Successfully connected: " + url);
}
return this.subject;
}
private create(url): ReplaySubject<MessageEvent> {
//create connection
let ws = new WebSocket(url);
//define observable
let observable = Observable.create(
(obs: Observer<MessageEvent>) => {
ws.onmessage = obs.next.bind(obs);
ws.onerror = obs.error.bind(obs);
ws.onclose = obs.complete.bind(obs);
return ws.close.bind(ws);
});
//define observer
let observer = {
next: (data: Object) => {
if (ws.readyState === WebSocket.OPEN) {
console.log("---sending ws message---");
ws.send(JSON.stringify(data));
}
}
};
return ReplaySubject.create(observer, observable);
}
}
NotificationService
import { Injectable } from '@angular/core';
import { Observable, Subject, ReplaySubject, BehaviorSubject } from 'rxjs/Rx';
import { WebsocketService } from './websocket.service';
import { Notification } from './../model/notification'
const NOTIFICATION_URL = 'ws://localhost:8080/Kwetter/socket'
@Injectable()
export class NotificationService {
public _notification: ReplaySubject<Notification>;
constructor(websocketService: WebsocketService) {
this._notification = <ReplaySubject<Notification>>websocketService
.connect(NOTIFICATION_URL)
.map((response: MessageEvent): Notification => {
let data = JSON.parse(response.data);
return {
sender: data.author,
message: data.message
}
});
}
sendMessage(notification) {
console.log("---calling .next()---");
this._notification.next(notification);
}
}
Компонент NotificationComponent
import { Component, OnInit } from '@angular/core';
import { NotificationService } from '../services/notification.service';
import { UserService } from '../services/user.service';
import { Notification } from './../model/notification';
@Component({
selector: 'app-notifications',
templateUrl: './notifications.component.html',
styleUrls: ['./notifications.component.css']
})
export class NotificationsComponent implements OnInit {
notification: Notification;
text: string;
constructor(private notificationService: NotificationService, private userService: UserService) {
if (this.notification == null) {
this.notification = new Notification("", "");
}
notificationService._notification.subscribe(notification => {
console.log("---notification has been updated---")
this.notification = notification;
});
}
sendMsg() {
let newNot = new Notification(this.userService.getUser(), this.text);
this.notificationService.sendMessage(newNot);
}
ngOnInit() {
}
}
HeaderComponent
import { Component, OnInit, OnDestroy } from '@angular/core';
import { UserService } from '../../services/user.service';
import { NotificationService } from '../../services/notification.service';
import { Router } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';
import { Profile } from '../../model/profile';
import { User } from '../../model/user';
import { Notification } from '../../model/notification';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit, OnDestroy {
private notification: Notification;
private loggedIn = false;
private user: User;
private subscription: Subscription;
constructor(private userService: UserService, private router: Router, private notificationService: NotificationService) {
console.log("---constructor headercomponent---");
console.log(this.notification);
this.notificationService._notification.subscribe(notification => {
console.log("---header notification has been updated---");
this.notification = notification;
});
if (this.notification == null) {
this.notification = new Notification("", "");
}
this.subscription = this.userService.profile$.subscribe(user => {
this.user = user;
if (user !== null) {
this.loggedIn = true;
}
else this.loggedIn = false;
});
this.loggedIn = userService.isLoggedIn();
this.user = userService.getUser();
}
logout() {
this.userService.logout();
this.router.navigate(['home']);
}
home() {
this.router.navigate(['home']);
}
myProfile() {
console.log("click");
this.router.navigate(['profile', this.userService.getUser().id]);
}
getLoggedIn(): void {
this.loggedIn = !!this.userService.isLoggedIn();
}
ngOnInit() {
this.getLoggedIn();
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
Компонент NotificationComponent отображается с использованием розетки маршрутизатора, а компонент заголовка всегда отображаетсяс помощью тегов селектора, но я не думаю, что это должно иметь значение.
<div>
<app-header></app-header>
<div class="content">
<router-outlet></router-outlet>
</div>
</div>
Я нашел тему ниже, в которой предлагалось использовать ReplaySubject в случае, если я подписываюсь после того, как событие было запущено (я не думаю, что это так, но я все равно пытался).Это не сработало.
Кроме того, у меня есть только один app.module, где я объявляю провайдеров.Поскольку я использую один и тот же код для обоих компонентов, почему .subscribe работает только в NotificationComponent?
Угловой 2: Наблюдаемый / Подписка не активируется
