RxJS. Next() scheitert still in Angular 2 App

Question

Ich versuche, eine grundlegende angular 2 App zu schreiben, die die neue Version von RxJS -> "rxjs" verwendet: "5.0.0-Beta.6".

Ich habe die Anweisungen von der cookbook gefolgt, versucht, einen Benachrichtigungsdienst zu machen, der irgendein Teil meiner App anrufen könnte, um eine Nachricht anzuzeigen.

Das Problem, das ich habe, ist, dass, wenn ich .next() anrufen, um die nächste Benachrichtigung hinzuzufügen, wird dies nicht vom Abonnement abgeholt. Die Zeile this.displayMessage(notification); läuft nach einem Anruf auf newNotification nicht. Ich habe den BehaviourSubject-Typ zu meinem Code hinzugefügt (im Gegensatz zu dem im Tutorial verwendeten Betreff) und festgestellt, dass der Anfangswert von der Subskription abgeholt wurde - der this.displayMessage(notification); wurde erfolgreich bei der Initialisierung aufgerufen. Das lässt mich denken, dass es etwas damit zu tun hat, wie/wo ich .next() in der NotificationService Klasse anrufe.

Hier sind die entsprechenden Klassen:

NotificationService:

import { Injectable } from '@angular/core'; 
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 
import { Notification } from '../notification/notification'; 

@Injectable() 
export class NotificationService { 
    // Observable string sources 
    private notificationSource = new BehaviorSubject<Notification>(new Notification({message:"test", priority:-1})); 
    notifications$ = this.notificationSource.asObservable(); 

    newNotification(message: string, priority: number) { 
    this.notificationSource.next(new Notification({ message, priority })); 
    } 

} 

MessageComponent:

import { Component, OnDestroy, OnInit } from '@angular/core'; 

import { Notification } from '../notification/notification'; 
import { NotificationService } from '../notification.service/notification.service'; 
import {MdIcon, MdIconRegistry} from '@angular2-material/icon'; 
import { Subscription } from 'rxjs/Subscription'; 

@Component({ 
    selector: 'message-container', 
    styleUrls: ['./app/message/message.component.css'], 
    templateUrl: './app/message/message.component.html', 
    directives: [MdIcon], 
    providers: [NotificationService, MdIconRegistry] 

}) 
export class MessageComponent implements OnDestroy, OnInit { 
    notification: Notification; 
    subscription: Subscription; 
    constructor(
    private notificationService: NotificationService) { 
    this.notificationService = notificationService; 
    } 
    ngOnInit() { 
    this.subscription = this.notificationService.notifications$.subscribe(
     notification => { 
     this.displayMessage(notification); 
     }, err => console.log(err),() => console.log("completed: ")); 
    } 

    displayMessage(notification: Notification) { 
    this.notification = notification; 
    window.setTimeout(() => { this.notification = null }, 3000); 
    } 
    ngOnDestroy() { 
    // prevent memory leak when component destroyed 
    this.subscription.unsubscribe(); 
    } 
} 

Wenn jemand irgendwelche Ideen über andere Dinge muss versuchen, das wäre toll . Vielen Dank

Edit: voll Repo hier: https://github.com/sandwichsudo/sentry-material/tree/notifications/src/app

Answer 1

GitHub finden nicht NotificationService in Ihrem Repository.

Ich nehme an, dass Sie NotificationService mehr als einmal bereitstellen und daher verschiedene Instanzen mit dem Ergebnis erstellt werden, dass Sie eine Instanz abonnieren und eine andere Instanz senden.

Stellen Sie sicher, Sie haben NotificationService entweder nur in bootstrap(AppComponent, [NotificationService, ...])oder nur in providers: [NotificationService] in Ihrem AppComponent. Entfernen Sie es von providers: [...] von allen anderen Komponenten und Anweisungen.