Как отписаться от наблюдаемого, созданного службой Angular

Я новичок в Angular, и мой вопрос может показаться простым, но некоторые рекомендации будут оценены. В настоящее время я пишу приложение, чтобы научить себя некоторым реальным навыкам разработки. В моем приложении у меня есть компонент Angular, который импортирует написанную мной службу, предоставляющую данные.

это мой компонент

@Component({
  selector: 'music-instrument-list',
  templateUrl: './instrument-report.component.html',
  styleUrls: ['./instrument-report.component.css']
})
export class InstrumentReportComponent implements OnInit, OnDestroy {
    
    constructor(public apiService: ApiService) {}
    public availableInstruments: any[];

    ngOnInit() {
        this.apiService.getInstruments().subscribe((result) => {
            this.availableInstruments = result;
        });
    }

    ngOnDestroy() {
    // how do I unsubscribe?
    }
}

Это довольно просто, но если я попытаюсь добавить this.apiService.getInstruments.unsubscribe() в блок ngOnDestroy, я получу ошибку, что Pсвойство 'unsubscribe' не существует для типа => Observable'. Я даже думал добавить .unsubscribe() после .subscribe(), как цепочку, но это просто заставляет мою страницу зависать. Я тоже не получаю ошибки. Может кто подскажет как лучше отписаться? Нужно ли мне назначать вызов API переменной, а затем использовать .unsubscribe() для имени переменной в блоке ngOnDestroy


angular angular-observable rxjs-observables
person NewToAngular    schedule 14.08.2019    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Чтобы избежать утечек памяти, вы можете отказаться от подписки с Observable по Subscription. Например:

    subscription: Subscription;

    ngOnInit() {
        this.subscription = this.apiService.getInstruments().subscribe((result) => {
            this.availableInstruments = result;
        });
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }

или используя async канал:

Машинопись:

    instruments$;

    ngOnInit() {
        this.instruments$= this.apiService.getInstruments().subscribe((result) => {
            this.availableInstruments = result;
        });
    }

HTML:

    <li *ngFor="let instr of instruments$ | async">
        {{ instr | json }} 
    </li>
person StepUp    schedule 14.08.2019
comment
Спасибо, это работает для меня! - person Chris; 24.06.2020

arrow_upward
0
arrow_downward

Вы не должны отписываться от наблюдаемых, которые завершаются автоматически (например, Http, звонки). Но необходимо отписаться от бесконечных наблюдаемых, таких как Observable.timer(). отписаться от HTTP-вызовов Angular

что касается отказа от подписки в целом, это дублирующий вопрос, и на него дается ответ здесь Как отказаться от наблюдаемый

person Basel Issmail    schedule 14.08.2019

arrow_upward
0
arrow_downward

Новейший и более чистый способ обработки наблюдателя в angular — это использование асинхронного канала в компоненте шаблона, его делегирование подписки и уничтожение наблюдаемого в структуре контейнера. Вы можете найти более подробный пример здесь (угловой документ): https://angular.io/api/common/AsyncPipe

person AYOUB_MA    schedule 14.08.2019