Angular Когда отписаться ()?

Что касается отказа от подписки, вы должны взглянуть на шаблон takeUntil, изложенный в в этом ответе . Это предпочтительный способ отписаться и избежать утечек памяти. Вы можете изменить свой код на что-то вроде этого:

...
export class UploadComponent implements OnInit, OnDestroy {
   private ngUnsubscribe = new Subject();
...

ngOnDestroy() {
   this.ngUnsubscribe.next();
   this.ngUnsubscribe.complete();
}

deleteFile(id: any) {
   if (window.confirm("Are you sure you want to delete this file?")) {

   this.fileCabinetService.deleteFile(id)
     .pipe(takeUntil(this.ngUnsubscribe))
     .subscribe(
       res => {
        ...
      },
      error => {
        ...
      }
    );
 }
}

Сказав , если вы подписываетесь на @angular/common/http наблюдаемой, вам не нужно отписываться, потому что http вызов службы complete() при возврате данных. Посмотрите на эту реализацию в xhr back-end для деталей:

if (response.ok) {
  responseObserver.next(response);
  // TODO(gdi2290): defer complete if array buffer until done
  responseObserver.complete();
  return;
}

Так что, для @angular/common/http запросов, не беспокойтесь об этом. Для большинства других следуйте шаблону takeUntil.

Вы неправильно поняли, как работают Subscription и add.

Когда вы subscribe к чему-то, вы получаете объект Subscription, к которому вы можете обратиться unsubscribe(). Это отлично. Тем не менее, вы не присвоили значение правильно. Вы присвоили Subscription - const sub, которые затем передаете как блок completion на add.

Рассмотрим Subscription.add как блок finally из try/catch. Независимо от результата Subscription, когда он равен complete, блок, переданный в add, будет выполняться. Используйте это для любых задач очистки.

subscriptions: Subscriptions[] = [];

ngOnDestroy() {
   subscriptions.forEach((sub) => sub.unsubscribe());
}

deleteFile(id: any) {
   const sub = this.fileCabinetService.deleteFile(id).subscribe(...);
   this.subscriptions.push(sub);
   sub.add(() => this.subscriptions.remove(sub));
}

Чтобы ответить на ваш вопрос о том, когда unsubscribe, это действительно зависит от того, что deleteFile делает. Если метод deleteFile внутренне сигнализирует со значением (или набором значений) и затем завершается, подписка прекращается автоматически. Если оно не будет завершено и оставлено висящим, ваша подписка будет сохраняться.

Рассмотрим сценарий:

WallClock.subscribe((time) => console.log(time));

Этот Subscription никогда не будет прекращен, потому что время (предположительно) будет продолжаться бесконечно. Вместо этого вы захотите вручную контролировать, когда это будет прекращено. Вы можете сделать это несколькими способами:

/* Get the current time, but don't bother listening to updates. */
WallClock.pipe(take(1)).subscribe((time) => console.log(time));

/* Continually update with the current time as long as the component is on screen
   — Requires setting `this.staySubscribed = false` when you're leaving */
WallClock.pipe(takeWhile(() => this.staySubscribed)).subscribe((time) => console.log(time));

/* Continually update until you remember to unsubscribe
   — Requires remembering to unsubscribe and can get verbose with multiple subscriptions
   - Call `this.subscription.unsubscribe()` later */
this.subscription = WallClock.subscribe((time) => console.log(time));

Если ваш deleteFile работает так и непрерывно сообщает значения без определенного условия завершения, вы должны каким-то образом прекратить подписку. Вероятно, это случай (основанный на названии функции), что это самоограничение Subscription, которое не требует ничего с вашей стороны. Если вы хотите быть в безопасности, pipe(take(1)) обеспечит это для вас.