Как правильно отписаться от результатов сервисов angular?

Question

У меня есть метод в компоненте, который вызывает службу, которая возвращает наблюдаемый

Код метода компонента

 public upload(file) { 
    this.Service.ToBase64(files[0])
        .subscribe(data => (this.convertedFile = data));
    }

Это работает нормально, но когда я отписываюсь по цепочке, он перестает работать.

С Unsubscribe - Это не работает

 public upload(file) { 
    this.Service.ToBase64(files[0])
        .subscribe(data => (this.convertedFile = data)).Unsubscribe();
    }

Метод сервисного кода

 convertedFile$: Subject<string> = new Subject<string>();

ToBase64(file: any) {
    const myReader = new FileReader();
    myReader.onloadend = e => {     
      this.convertedFile$.next(myReader.result.toString().split(',')[1]);
    };
    myReader.readAsDataURL(file);
    return this.convertedFile$.asObservable();
  }

В качестве этой темы я хотел бы отписаться.Как я могу сделать это правильно?

Answer 1

Вы должны объявить свойство подписки

Сначала в вашем компоненте

import { Subscription } from 'rxjs';

Затем

fileSubscription: Subscription;

И в вашем методе

 public upload(file) { 
    this.fileSubscription = this.Service.ToBase64(files[0])
       .subscribe(data => (this.convertedFile = data));
    }

В методе ngOnDestroy

ngOnDestroy() {
    if (this.fileSubscription) {
        this.fileSubscription.unsubscribe();
    }
}

С уважением

Answer 2

Метод unsubscribe(), а не Unsubscribe().Но более элегантный способ получить значение наблюдаемой и уничтожить подписку - использовать первый оператор, подобный этому:

import { first } from 'rxjs/operators';


  public upload(file) { 
    this.Service.ToBase64(files[0]).pipe(first())
        .subscribe(data => (this.convertedFile = data));
    }