如何在 stackblitz 示例中的每次点击时创建新的 ReplaySubjects？答案

【问题标题】：How to create new ReplaySubjects on each click in stackblitz example?如何在 stackblitz 示例中的每次点击时创建新的 ReplaySubjects？
【发布时间】：2020-03-06 22:39:46
【问题描述】：

我正在学习 rxjs 主题，特别是 ReplaySubjects。我想修改这个示例https://stackblitz.com/edit/rxjs-behaviorsubject-mouseclicks-1sybjt，以便每次新点击都会创建一个新订阅者来演示 ReplaySubject 属性。这不是它目前的工作方式 - 新单元格显示相同的值是因为（我认为）它们都显示一个主题，但我在理解在哪里插入新订户的创建时遇到问题。非常感谢任何建议或帮助。

【问题讨论】：

您将 subject 返回到 mergeMap，因此每次点击都会创建新订阅。
链接已损坏。请将相关代码添加到您的问题中。

标签： javascript rxjs

【解决方案1】：

原始链接现已损坏（抱歉不是我的），但我在这里解决了我的问题。 https://stackblitz.com/edit/rxjs-behaviorsubject-mouseclicks-ndcysb

它比原来的例子更简单一些，因为我已经明确订阅了 replaysubject 和订阅者是如何工作的。

console.clear();
import { BehaviorSubject, Subject, ReplaySubject, fromEvent, interval, merge } from 'rxjs';
import { map, tap, mergeMap } from 'rxjs/operators';

const setElementText = (elemId, text) => 
  document.getElementById(elemId).innerText = text.toString();

const addHtmlElement = coords => document.body.innerHTML += `
  <div 
    id=${coords.id}
    style="
      position: absolute;
      height: 30px;
      width: 30px;
      text-align: center;
      top: ${coords.y}px;
      left: ${coords.x}px;
      background: ${rgb()};
      border-radius: 80%;"
    >
  </div>`;

const subject = new ReplaySubject(5);

function randomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function rgb(min=0, max=255)
{
  var r = randomInt(min, max);
  var g = randomInt(min, max);
  var b = randomInt(min, max);
  return `rgba(${r}, ${g}, ${b}, 0.5)`;
}

const click$ = fromEvent(document, 'click').pipe(
  map((e: MouseEvent) => ({ 
    x: e.clientX,
    y: e.clientY,
    id: Math.random() })),
  tap(coords => addHtmlElement(coords)),
  tap(function(coords) {
    console.log("new subscriber!");
    var subscriber = subject.subscribe(function(x) {
      console.log("coords.id, x", coords.id, x);
      setElementText(coords.id, x)
    });
  }),
);

const interval$ = interval(2000).pipe(
  tap(v => subject.next(v)),
  tap(v => setElementText('intervalValue', v))
);

merge(click$, interval$).subscribe();

【讨论】：