如何取消订阅所有正在观看来自 'fromEvent' 的观察者？

Question

假设我正在迭代数组以使元素像这样：

var containerEl = document.createElement('div');
var list = [1, 2, 3, 4, 5];

list.map((data) => {
    var divEl = document.createElement('div');
    divEl.innerText = data;

    // Make observer for click
    divEl.onclick$ = fromEvent(divEl, 'click');

    containerEl.appendChild(divEl);
});

结果应该是这样的：

<div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

重要的是我添加了onclick$，这是可以观察到的：

divEl.onclick$ = fromEvent(divEl, 'click');

现在我可以像这样订阅 onclick：

divEl.onclick$.subscribe(...);

但是，如果我重绘在循环列表数组时创建的所有 div 元素会怎样？

要取消订阅观察，我不得不调用取消订阅，它包含在订阅的返回值中：

const a$ = divEl.onClick$.subscribe(...);

...

a$.unsubscribe();

这很不舒服，尤其是从模块化/库开发的角度来看。

在这种情况下，是否有办法取消订阅 divEl.onclick$ 的所有观察者？

如有任何建议，我们将不胜感激。

Answer 1

您可以使用 "takeUntil" 运算符，例如

private unsubscriber$: Subject<boolean> = new Subject<boolean>();
const a$ = divEl.onClick$.takeUntil(this.unsubscriber$).subscribe(...);

---
// you want to unsubscribe 

this.unsubscriber$.next(true);
this.unsubscriber$.unsubscribe();

当您更改 "unsubscriber$" 可观察对象

中的值时，您使用 takeUntil 运算符的每个可观察对象都将取消订阅

如何取消订阅所有正在观看来自 'fromEvent' 的观察者？

How to unsubscribe all observers that watching observable made from 'fromEvent'?

rxjs

reactive-programming

observer-pattern

observers

reactive