0
ウェブソケットを使用して簡単な通知システムをセットアップしようとしています。新しいデータでDomが更新されない
私は私のWebSocketサービスがあります。
import {Injectable} from '@angular/core';
import {Observable, Observer, Subject} from 'rxjs/Rx'
@Injectable()
export class WebSocketService {
private socket: Subject<MessageEvent>;
public connect(url): Subject<MessageEvent> {
if (!this.socket) {
this.socket = this.create(url);
}
return this.socket;
}
private create(url): Subject<MessageEvent> {
let ws = new WebSocket(url);
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);
}
);
let observer = {
next: (data: Object) => {
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify(data));
}
},
};
return Subject.create(observer, observable);
}
}
通知サービスは、通知が含まれています
import {Injectable} from '@angular/core';
import {Subject} from 'rxjs/Rx'
import {WebSocketService} from "./websocket.service";
@Injectable()
export class NotificationService {
public messages: Subject<Object>;
constructor(wsService: WebSocketService) {
let notificationUrl = `ws://localhost:4969/Notification`;
this.messages = <Subject<Object>>wsService
.connect(notificationUrl)
.map((response: MessageEvent): Object => {
return JSON.parse(response.data);
});
}
}
サービス通知の件名をサブスクライブコンポーネント：
import {Component, OnInit, ElementRef} from '@angular/core';
import {Notification} from "./notification";
import {NotificationService} from "../../services/notification.service";
@Component({
selector: 'notifier',
templateUrl: 'notifier.component.html',
styleUrls: ['notifier.component.css'],
host: {
'(document:click)': 'onClickedOutside($event)',
},
})
export class NotifierComponent implements OnInit {
notifications: Notification[] =[];
constructor(private elementRef: ElementRef, private notificationService: NotificationService) {
}
ngOnInit() {
this.notificationService.messages.subscribe(notification => {
let not = new Notification(notification.title, notification.notificationTypes, notification.data);
console.log(not);
let index = this.notifications.findIndex(x=>x.title == not.title);
if (index ==-1) {
this.notifications.push(not);
}
else {
this.notifications[index].data.progress=not.data.progress;
}
console.log(this.notifications)
});
}
}
だから私のwebsocketサーバーは、タイトルで一意に識別できる通知を送信します。タイトルが既に通知配列に存在する場合は、進行状況を更新し、そうでない場合はプッシュします。
1つのこと以外はすべて正常に動作します。 通知の更新ごとに私のビューは更新されませんが、どこかをクリックすると、クリックイベントが再描画され、進行状況が表示されます。
Angular2がどのようにデータを伝播するかについての記事をいくつか読んだことがあります。私が読んだことで、あなたがサブジェクトに登録してデータを変更すると、再レンダリングするイベントが発生するはずですが、ここのケース。
私には何が欠けていますか？私は、「この質問の助けを借りて、私の問題を解決することができていまし