如何取消订阅所有观看由“fromEvent”制作的可观察对象的观察者？答案

【问题标题】：How to unsubscribe all observers that watching observable made from 'fromEvent'?如何取消订阅所有观看由“fromEvent”制作的可观察对象的观察者？
【发布时间】：2019-03-28 14:20:38
【问题描述】：

假设我正在迭代数组以使元素如下所示：

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$ 取消订阅所有观察者？

任何建议都会非常感激。

【问题讨论】：

标签： rxjs reactive-programming observer-pattern observers reactive

【解决方案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$" observable 中的值时，每个你使用 takeUntil 操作符的 observable 都会取消订阅

【讨论】：

你是我的救星。谢谢老兄！！