В компонент подгружаются данные. Поскольку данных много, читаем их по частям. К компоненту подключен сервис, который читает данные. Если читать одним куском -- нет вопросов. А вот как быть с чтением кусками?
// массив данных
public userReqList: AssessRequest[];
// сервис работы с данными
constructor(
private reqListService: RequestListService,
) {}
// во время инициализации читаем стартовую порцию данных
ngOnInit() {
const url = `${this.apiRoute}`;
this.listSubscr$ = this.reqListService
.getUserReqList(url)
.subscribe((data: AssessRequest[]) => {
this.userReqList = data;
});
}
// закрываем подписку на поток данных
ngOnDestroy(){
this.listSubscr$.unsubscribe();
}
// Событие скролла, которое инициируем подчитывание данных
onScrollDown(): void {
this.readItems(this.userReqList.length, this.limit, this.filter);
}
// Подчитываем данные по кусочку, указывая считываемый фрагмент
readItems(from: number, limit: number): void {
const url = `${this.apiRoute}?start=${from}&limit=${limit}`;
this.reqListService
.getUserReqList(url)
.subscribe((data) => {
this.userReqList.push(...data);
})
}
По идее каждый вызов readItems будет генерировать подписку на поток, которая после прочтения потока как бы зависает в воздухе и формирует куче слушателей.
Как обойти такое? Можно конечно сразу-же по завершению потока отписываться от него, но это, по моему, как-то ненормально.
readItems(from: number, limit: number, filter: string): void {
const url = `${this.apiRoute}?start=${from}&limit=${limit}`;
const subscr$ = this.reqListService
.getUserReqList(url)
.subscribe((data) => {
this.userReqList.push(...data);
subscr$.unsubscribe();
})
}
Есть же наверное стандартный подход для такой ситуации?
Я искал решения, но подходящего не нашел.
Буду благодарен за помощь.