在將值添加到可觀察值前等待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並返回給訂閱者。