rxjs重播的使用场景

1.场景：问答iframe嵌套页面到图谱问答项目中，涉及到传值的问题。父页面使用postMessage的方式向iframe子页面传值。

2.问题：虽然父页面是在iframe onload之后再使用postMessage进行传值，但是仍然有可能出现子页面没有接收到传值的情况。

3.解决：

方式一、可以使用rxjs的重播ReplaySubject先保存接收到的值，然后在组件订阅的时候进行重播触发。

方式二、可以使用url的query进行传值。

4.代码：方式一、

// 重播保存
const messageReplaySubject$ = new ReplaySubject<MessageEvent>();
fromEvent<MessageEvent>(window, 'message').subscribe((source) => {
    messageReplaySubject$.next(source);
});

// 订阅消费
useEffect(() => {
    const sub = messageReplaySubject$.subscribe((v) => {
        console.log('postMessage传值获取', v);
    });
    return () => {
        sub.unsubscribe();
    }
}, [];