Телеграмм чат группы angular

Size: a a a

Angular - русскоговорящее сообщество

4906 membersпожаловаться на группу

2020 February 04

Yuri Katkov in Angular - русскоговорящее сообщество

дада, я именно не понимаю, с какой стороны тут прикручивается поток событий докручивания юзера до низа страницы

источник

01:17пожаловаться #1

Dilame Bowzee in Angular - русскоговорящее сообщество

https://angular.io/guide/reactive-forms#displaying-a-form-control-value
В доках очень мало сказано про valueChanges почему-то, но в общих чертах - это observable изменения формы

источник

01:17пожаловаться #2

Yuri Katkov in Angular - русскоговорящее сообщество

источник этого потока - библиотечка ng-infinite-scroll

источник

01:17пожаловаться #3

Dilame Bowzee in Angular - русскоговорящее сообщество

Yuri Katkov

Внутри switchMap вы вызываете ф-цию, которая возвращает поток. Вот внутри этой ф-ци при создани потока вы и подпиисываетесь на скролл

источник

01:18пожаловаться #4

Yuri Katkov in Angular - русскоговорящее сообщество

сейчас осознаю...

источник

01:19пожаловаться #5

Dilame Bowzee in Angular - русскоговорящее сообщество

Yuri Katkov

источник этого потока - библиотечка ng-infinite-scroll

https://www.npmjs.com/package/ngx-infinite-scroll
Вы про эту? Я тут что-то не вижу обзёрвблов

npm

npm: ngx-infinite-scroll

An infinite scroll directive for Angular compatible with AoT compilation and Tree shaking

источник

01:20пожаловаться #6

Yuri Katkov in Angular - русскоговорящее сообщество

ну, у нее же scrolled - это EventEmitter

источник

01:21пожаловаться #7

Yuri Katkov in Angular - русскоговорящее сообщество

то есть Subject

источник

01:21пожаловаться #8

Yuri Katkov in Angular - русскоговорящее сообщество

то есть Observable

источник

01:23пожаловаться #9

Dilame Bowzee in Angular - русскоговорящее сообщество

Yuri Katkov

ну, у нее же scrolled - это EventEmitter

Сейчас попробую вам каркас собрать

источник

01:24пожаловаться #10

Yuri Katkov in Angular - русскоговорящее сообщество

событие scroll должно scan’ом увеличиваться каждый раз на один и сбрасываться в ноль если срабатывают наши фильтры-сортировка-поиск

источник

01:26пожаловаться #11

Dilame Bowzee in Angular - русскоговорящее сообщество

Yuri Katkov

private results = this.form.valueChanges.pipe(switchMap(params => this.newResults(params)))

newResults(params) {
  return this.scrolled.pipe(
    startWith(0),
    mergeMap(() =>  this.request(params, page)),
    scan((acc, response) => acc.concat(response), [])
  )
}

Это прям совсем псевдо-код, что бы суть донести

источник

01:28пожаловаться #12

Yuri Katkov in Angular - русскоговорящее сообщество

вроде понятно…

источник

01:30пожаловаться #13

Yuri Katkov in Angular - русскоговорящее сообщество

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

источник

01:31пожаловаться #14

Yuri Katkov in Angular - русскоговорящее сообщество

которые combineLatest с моими valueChanges

источник

01:32пожаловаться #15

Dilame Bowzee in Angular - русскоговорящее сообщество

Yuri Katkov

которые combineLatest с моими valueChanges

Именно

источник

01:32пожаловаться #16

Yuri Katkov in Angular - русскоговорящее сообщество

кажется, взлетит, завтра попробую нарисовать это уже в виде кода

источник

01:32пожаловаться #17

Yuri Katkov in Angular - русскоговорящее сообщество

Dilame Bowzee

private results = this.form.valueChanges.pipe(switchMap(params => this.newResults(params)))

newResults(params) {
  return this.scrolled.pipe(
    startWith(0),
    mergeMap(() =>  this.request(params, page)),
    scan((acc, response) => acc.concat(response), [])
  )
}

Это прям совсем псевдо-код, что бы суть донести

гм, а где у нас page инкрементируется?

источник

01:33пожаловаться #18

Dilame Bowzee in Angular - русскоговорящее сообщество

Yuri Katkov

гм, а где у нас page инкрементируется?

Можно поставить ещё один скан после startWith

источник

01:34пожаловаться #19

Yuri Katkov in Angular - русскоговорящее сообщество

ага, понял

источник

01:34пожаловаться #20