在将值添加到可观察值前等待x秒

Question

我有一个消息服务，每当调用API方法时都会发出消息。这个想法是这样的，我的应用程序中的所有其他组件都可以调用服务中的方法来显示错误或成功消息。

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的时间长。

Answer 1

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

或者，Rxjs方式，这是可笑复杂：

1你需要创建服务中的延迟特性：

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

2 - 你需要创建一个延迟消息的版本$像这样：

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

3-每个hideMessage和showError都可以更新延迟;

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-您需要通知您的用户订阅this.$delayableMessage;

基本上，创建一个observable，并且延迟订阅它，with flatMap将其映射到一个新的observable并返回给订阅者。