Как отписаться от заметки, созданной Angular Service

Question

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

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

@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 Блок Я получаю сообщение об ошибке, что Property "отписаться" не существует на тип => Наблюдаемый ". Я даже подумал добавить .unsubscribe() после .subscribe() как цепочка, но это просто заставляет мою страницу зависать. Я тоже не получаю ошибки. Может кто-нибудь подскажите пожалуйста как лучше отписаться? Нужно ли присваивать вызов API переменной, а затем использовать.unsubscribe() для имени varable в ngOnDestroy блок

Answer 1

Чтобы избежать утечек памяти, вы можете отписаться от 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>

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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