我有一个像这样实现的零食栏主题,其中消息将在Angular应用中出现4秒:
snackbar = new BehaviorSubject<string | null>(null);
showMessage(message: string) {
this.snackbar.next(message);
setTimeout(() => {
this.snackbar.next(null);
},4000)
}
我想知道是否有可能以一种更像rxjs的方式实现这一点,就像定义后的管道一样,在那里有一个超时,4秒后有一个新值。这是可能的还是我的解决方案是你怎么做的?
Rxjs的实现方式。每次当您发射消息时,它都会与null
值发射配对。concatMap
将确保您永远不会错过推送到队列的任何消息
import { of, map, Observable, Subject, timer, merge } from 'rxjs';
import { concatMap, mapTo, switchMap } from 'rxjs/operators';
const message = new Subject();
setInterval(() => message.next(Math.random()), 6000);
message
.pipe(concatMap((value) => merge(of(value), timer(4000).pipe(mapTo(null)))))
.subscribe(console.log);
你可以使用这个可观察对象作为snackbar消息的源,message
主题将作为消息发射器。
https://stackblitz.com/edit/rxjs-cupp2f?file=index.ts