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();

使用takeUntil运算符的每个可观察对象，当您更改“ unsubscriber $”可观察对象内的值时，将取消订阅

如何退订所有观看者从“ fromEvent”观看的可观察者？

1 个答案: