2016-12-27 9 views
1

APIメソッドが呼び出されるたびにメッセージを送信するメッセージサービスがあります。アイデアは、私のアプリの他のすべてのコンポーネントがサービスからメソッドを呼び出してエラーメッセージまたは成功メッセージを表示できるようにすることです。observableに値を追加するまでにx秒待つ

import { Injectable } from '@angular/core'; 
import { MessagingComponent } from ',/messaging.component'; 
import { ReplaySubject } from 'rxjs'; 



@Injectable() 
export class MessageService { 

    public messages$: ReplaySubject<Object> = new ReplaySubject<Object>(1); 

    constructor() { 
    this.messages$.next({ 
     message: '', 
     type: null 
    }); 
    } 

    showError(message: string, time: number): void { 
    this.messages$.next({ 
     message, 
     type: 'message-error', 
     time: time 
    }); 

    hideMessage(){ 
    this.messages$.next({ 
     message: '', 
     type: null 
    }); 
    } 

アイデアは、他のコンポーネントがmessageService.showError('my error message', 3000)を呼び出すことができるということです。私はshowErrorメソッドを3秒後にhideMessageメソッドを呼び出す方法について混乱していますが、呼び出し元がtimeのために提供しています。

+1

['delay'](http://reactivex.io/documentation/operators/delay.html)が必要です。 – jonrsharpe

答えて

2
showError(message: string, time: number): void { 
    this.messages$.next({ 
     message, 
     type: 'message-error', 
     time: time 
    }); 
    setTimeout(this.hideMessage,time); 
} 

か、途方もなく複雑であるRxjsの方法、:あなたは遅れを作成する必要が

export class YouService{ 
    private delay = 3000; // default delay; 
... 

2 - :あなたはあなたのサービスの内部遅延プロパティを作成する必要が

の1-このようなメッセージ$のバージョン:

this.delayableMessage$ = 
     this.message$.asObservable().flatMap((message) => { 
      return Observable.of(message).delay(this.delay) 
     }); 

3すべてのhideMessageとshowErrorが遅延を更新する可能性があります。あなたがthis.$delayableMessageに加入するためにあなたの契約者に伝える必要があり

showError(message: string, time: number): void { 
     this.delay = 0; 
     this.messages$.next({ 
      message, 
      type: 'message-error', 
      time: time 
     }); 
     this.hideMessage(time); 
    } 

    hideMessage(time){ 
     this.delay = time; 
     this.messages$.next({ 
      message: '', 
      type: null 
     }); 
    } 

、4-;

基本的には、observableを作成し、それをdelayでサブスクライブし、with flatMapを新しいobservableにマッピングし、それをサブスクライバに返します。

+0

なぜ地球上でdownvote? – Milad

+0

'observable'を' delay'して返しませんか?この場合、 'next'を呼び出すと失敗します。 –

+0

はい、2番目のコードサンプルは機能しません。あなたは 'Subject'の入力コンポーネントからの出力を混乱させています。 – paulpdaniels

関連する問題