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，使用延迟订阅它，使用flatMap将它映射到一个新的observable并返回给订阅者。

在向可观察

1 个答案: