Как отписаться от всех наблюдателей, которые наблюдают за наблюдаемым из fromEvent?

Скажем, я повторяю массив, чтобы элементы были примерно такими:

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

24.10.2018 10:35

Освоение Observables и Subjects в Rxjs:

Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular

Promise v/s Observable в Angular

В системах Push производитель определяет, когда отправить данные потребителю. Потребитель не знает, когда он получит эти данные.

Подсказка RxJS [filter, skipWhile]

Эта подсказка описывает разницу между операторами filter и skipWhile из библиотеки RxJS .

В чем разница между Promise и Observable?

Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.

166

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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 $».

Ты мой спасатель. Спасибо чувак!!

— 24.10.2018 11:28

24.10.2018 10:48