Cara mereset RxJS berbeda di sudut2

Saya perlu menerapkan pengguliran tak terbatas karena respons backend saya dibatasi hanya untuk 100 item. Jadi pada upaya halaman pertama saya menerima 100 item dari backend. Dan pada setiap gulir ke akhir halaman saya memerlukan titik akhir panggilan untuk 100 item lainnya.

Di komponen anak saya (BpHistoryListInfiniteComponent), saya menetapkan atribut data-load untuk pelacakan ketika elemen 100. muncul. Dan kemudian dengan IntersectionObserver ditetapkan dalam nilai Subjek(pageByScroll$) dari atribut beban data. pageByScroll$ saya harus dimulai dengan 0 (untuk upaya halaman pertama) dan saya menggunakan distinct() karena saya memerlukan distinct item yang sudah dimuat, dan kemudian memancarkan nilai itu ke komponen induk saya.

Tetapi setelah menggunakan salah satu filter di komponen induk saya perlu mengatur ulang nilai index ke 0 dan mengirimkannya serta memfilter nilai ke backend (dan hanya menerima 100 item), dan kemudian jika pengguna menggulir ke bawah saya perlu meningkatkan index saya dari 0 lagi tapi distinct() tidak mengizinkanku melakukan itu.

Saya perlu mengatur ulang nilai yang berbeda.

//html bagian dari komponen anak

<div #infiniteScrollMadness class="column">
  <div *ngFor="let item of history; let i = index" class="list" [attr.data-load]="(i + 1) % 100 == 0 ? (i + 1) : null">
    <span>{{ item.id }}</span>
    <span>{{ item.name }}</span>
  </div>
</div>

.ts bagian dari komponen anak

export class BpHistoryListInfiniteComponent implements AfterViewInit {
    public pageByScroll$ = new Subject<number>();

    @ViewChild("infiniteScrollMadness")
    private scrollHost: ElementRef;

    @Input()
    history: HistoryModel;

    @Input()
    highlight: string;

    @Output()
    index = new EventEmitter<number>();

    ngAfterViewInit() {
        const intersectionObserver = new IntersectionObserver(
            entries => {
                entries
                    .filter(element => element.isIntersecting)
                    .forEach(element => {
                        this.pageByScroll$.next(
                            element.target.attributes["data-load"].value
                        );
                    });
            },
            {
                threshold: 0.1
            }
        );
        const mutationObserver = new MutationObserver(mutations => {
            mutations.forEach(mutation => {
                if (!mutation.addedNodes || mutation.type !== "childList") {
                    return;
                }
                const nodes = Array.prototype.slice.call(mutation.addedNodes, 0);

                nodes.filter(node => node.nodeType === Node.ELEMENT_NODE)
                    .forEach((element: Element) => {
                        if (element.attributes["data-load"]) {
                            this.zone.runOutsideAngular(() => {
                                intersectionObserver.observe(element);
                            });
                        }
                    });
            });
        });

        mutationObserver.observe(this.scrollHost.nativeElement, {
            childList: true
        });

        this.pageByScroll$.pipe(
            startWith(0),
            distinct()
        ).subscribe(index => this.index.emit(index));
    }

    constructor(private zone: NgZone) {}
}

pageByScroll$ stream:
- percobaan halaman pertama => nilai: 0
- gulir ke bawah (+100) => nilai: 100
- gulir ke bawah (+100) => nilai: 200
- gulir ke bawah (+100) => nilai: 300
- gunakan salah satu filter => nilai: 0
- gulir ke bawah (+100) => nilai: 100
- gulir ke bawah ( +100) => nilai: 200