Warten Sie x Sekunden, bevor Sie beobachtbaren Wert hinzufügen

Question

Ich habe einen Nachrichtendienst, der immer dann eine Nachricht ausgibt, wenn die API-Methode aufgerufen wird. Die Idee ist, dass alle anderen Komponenten in meiner App Methoden vom Dienst aufrufen können, um entweder Fehler- oder Erfolgsmeldungen anzuzeigen.

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

Die Idee ist, dass jede andere Komponente messageService.showError('my error message', 3000) aufrufen kann. Ich bin verwirrt darüber, wie ich meine Methode, die hideMessage Methode nach 3 Sekunden aufrufen, oder wie lange der Anrufer für time zur Verfügung gestellt.

Answer 1

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

Oder die Rxjs Art und Weise, die lächerlich kompliziert ist:

1- Sie müssen eine Verzögerungseigenschaft in Ihrem Dienst erstellen:

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

2- Sie benötigen ein verzögertes erstellen Version der Nachricht $ wie folgt:

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

3- Jede hideMessage und showError konnte die Verzögerung aktualisieren;

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- Sie müssen Ihre Abonnenten sagen, this.$delayableMessage zu abonnieren;

Grundsätzlich erstellen Sie eine beobachtbare, abonnieren Sie sie mit Verzögerung und die mit FlatMap Karte es zu einer neuen beobachtbaren und zurück, dass für Abonnenten.