2016-06-15 3 views
2

私はRxJSの新しいバージョンを使用して基本的な角度の2アプリを、書き込みしようとしています。RxJS .next()角度2アプリケーションで静かに失敗し

私は私のアプリの一部がメッセージを表示するために呼び出すことができます通知サービスを作ろうと、cookbookからの指示に従ってきました。

私がいる問題は、私は次の通知を追加する.next()を呼び出すとき、これは、サブスクリプションによってピックアップされていないということです。 newNotificationの呼び出し後にthis.displayMessage(notification);行が実行されません。 BehaviourSubject型を(チュートリアルで使用されているSubjectとは対照的に)自分のコードに追加し、初期値がサブスクリプションによって取得されたことを確認しました。this.displayMessage(notification);が初期化時に正常に呼び出されました。これは、私がそれがどのように/私がNotificationServiceクラスの.next()を呼び出しているかと関係があると思います。誰もがそれは素晴らしいことだしようとする他のことについてどんな考えを持っている場合

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(); 
    } 
} 

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ここ

は、関連するクラスであります。 多くのおかげ

編集:ここ フルレポ: https://github.com/sandwichsudo/sentry-material/tree/notifications/src/app

答えて

2

GitHubには、リポジトリ内NotificationServiceを見つけることができません。

あなたはNotificationServiceを複数回提供していると想定しています。したがって、異なるインスタンスが作成され、結果として1つのインスタンスに加入して別のインスタンスに送信します。

あなたはNotificationServiceどちらかのみbootstrap(AppComponent, [NotificationService, ...])でのみproviders: [NotificationService]であなたのAppComponentであることを確認してください。他のすべてのコンポーネントおよびディレクティブからproviders: [...]を削除します。

+0

返事をありがとう非常に多くを - 私は正しい分岐https://github.com/sandwichsudo/sentry-material/tree/notifications/src/appのためのレポのURLを更新しました。私はあなたが何を示唆しているかを確認しますが、私はどこにでもブートストラップしないと確信していますが、症状は正しいと思います。 –

+0

GitHubは何も見つかりません。おそらく最初にリポジトリのインデックスを作成する必要があります。サービスを複数回提供するかどうか確認しましたか? –

+0

私は一見して、私はプロバイダでNotificationServiceを使用します。ブートストラップを含むファイルは次のとおりです。https://github.com/sandwichsudo/sentry-material/blob/notifications/src/main.tsと通知サービスは表示されません。私はなぜ検索でそれが見つからないのか分かりませんが、これは確かにこのファイルにあります:https://github.com/sandwichsudo/sentry-material/blob/notifications/src/app/notification.service/notification.service .ts –

関連する問題