Забота о наблюдаемых и подписках на компоненты onDestroy

Question

Когда компонент уничтожается, angular автоматически "обрабатывает / закрывает / завершает" наблюдаемые и связанные с ними подписки, используемые компонентом?

Или я должен явно позаботиться о них в компоненте onDestroy?

Согласно принятому ответу на этот вопрос, по крайней мере, до апреля 2017 года требуется ручная обработка наблюдаемых.

Интересно, если это все еще так

РЕДАКТИРОВАТЬ 1

На угловых документах я нашел эту трубу, которая, кажется, решает проблему, но я не уверен, как использовать ее в моих компонентах. Вместо того, чтобы устанавливать свойство в subscribe.next, разработчик должен хранить наблюдаемое в свойстве. Как будет выглядеть следующий шаблон компонента, если я использую асинхронный канал и устанавливаю свойство для наблюдаемого?

<h1>{{property.title}}</h1>
<p>{{property.description</p>

Answer 1

Вам не нужно отписываться от всех заметок.

Вы должны отписаться от:

• Элементы управления формой
• Пользовательские наблюдаемые, в основном или те, которые вы создаете из предметов и тому подобное.
• Наблюдаемые третьи стороны в целом

Вам не нужно отписываться от:

• HTTPClient
• маршрутизатор
• Некоторые операторы, как принять
• Использование асинхронного канала

Дополнительные ресурсы:

https://www.reddit.com/r/Angular2/comments/66v9yy/so_we_should_never_really_unsubscribe_from/

Angular / RxJs Когда я должен отписаться от `Подписки`

https://medium.com/@benlesh/rxjs-dont-unsubscribe-6753ed4fda87

Answer 2

Вы должны отказаться от подписки. Angular не справится с этим для вас.

Вы можете сделать автоматическую отписку с декоратором:

export function AutoUnsubscribe(blacklist = []) {
  return function (constructor) {
    const original = constructor.prototype.ngOnDestroy;
    constructor.prototype.ngOnDestroy = function () {
      // tslint:disable-next-line:forin
      for (const prop in this) {
        const property = this[prop];
        if (!blacklist.includes(prop)) {
          if (property && (typeof property.unsubscribe === 'function')) {
            property.unsubscribe();
            // console.log(prop + ' unsubscribed');
          }
        }
      }
      if (original && typeof original === 'function') { original.apply(this, arguments); }
    };
  };
}

В ваших компонентах теперь вам просто нужно сделать это:

@AutoUnsubscribe()
export class MyComponent { ... }

Не забудьте назначить свои подписки переменной, чтобы их можно было отписать. Примерно так (генерация случайных строк):

this[Math.random().toString(36).slice(-5)] = this.myService.myFunc().subscribe(...);

А если вы не заметили, вы можете дать имена своим подпискам и поместить их в массив декорзтора, чтобы не отписываться от уничтожения компонента.