等待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方法調用hideMessage 3秒，不過還是長期提供呼叫者之后方法time 。

Answer 1

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

或者，Rxjs方式，這是非常復雜的：

1-您需要在服務內部創建一個delay屬性：

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

2-您需要創建message $的延遲版本，如下所示：

 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，延遲訂閱它，然后使用flatMap將其映射到一個新的observable並將其返回給訂閱者。