Angular. Когда не надо отписываться в RxJS?

Всегда надо отписываться

Если использовать async pipe, то за вас отпишется Angular. Во всех остальных случаях лучше отписываться самостоятельно.

Допускается не отписываться в потоках, где будет гарантировано вызван complete такие как of, timer или http запрос.

На сегодняшний день наиболее популярны 2 декларативных подхода отписки:

takeUntil

Паттерн takeUntil() от члена RxJs core team - Nicholas Jamieson

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-inbox',
  templateUrl: './inbox.component.html',
})
export class InboxComponent implements OnInit, OnDestroy {
  ngOnInit() {
    interval(1000)
      .pipe(takeUntil(this.destroy$))
      .subscribe(val => console.log(val));
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

takeUntil() должен быть последним оператором внутри pipe.

untilDestroyed

Подход от Netanel Basal. Является развитием способа takeUntil: не требует создания Subject и вызова у него методов next и complete.

import { untilDestroyed } from 'ngx-take-until-destroy';

@Component({
  selector: 'app-inbox',
  templateUrl: './inbox.component.html',
})
export class InboxComponent implements OnInit, OnDestroy {
  ngOnInit() {
    interval(1000)
      .pipe(untilDestroyed(this))
      .subscribe(val => console.log(val));
  }

  // Хук всегда должен присутствовать в компоненте, даже если пустой
  ngOnDestroy() { }
}

Похожие записи

RxJs Subjects

Выдержки из доклада Андрея Алексеева (Tinkoff) про RxJs (Subject, Behaviour Subject, Replay Subject, Async Subject). Применение в Angular.

Upload файла в Angular по клику кнопки

Создано простейшее nestjs приложение, принимающее файлы. Выбор и отправка файла по клику подразумевает, что на форме отсутствует input для файла. Отправка запроса осуществляется с отслеживанием прогресса.

Angular Storybook

Установите пакет npm i @storybook/cli -g и запустите команду sb init в корне angular проекта.

30 октября 2018 г. в Angular

Angular setter

Пример задания значения булева Input свойства как директивы, на примере:

09 октября 2018 г. в Angular