javascript - 如何在angular2中重置RxJS不同
问题描述
我需要实现无限滚动,因为我的后端响应仅限于 100 个项目。所以在第一页尝试我从后端收到 100 个项目。在每次滚动到页面末尾时,我都需要为另外 100 个项目调用端点。
在我的子组件 ( BpHistoryListInfiniteComponent
) 中,我设置data-load
了用于跟踪 100. 元素何时出现的属性。然后在数据加载属性IntersectionObserver
的 Subject( pageByScroll$
) 值中设置。我pageByScroll$
需要从 0 开始(对于第一页尝试)并且我使用distinct()
因为我需要distinct
已经加载的项目,然后将该值发送到我的父组件。
但是在父组件中使用其中一个过滤器后,我需要将index
值重置为 0 并将其发送并将过滤器值发送到后端(并且只接收 100 个项目),然后如果用户滚动到底部,我需要index
再次从 0 增加但distinct()
不是请允许我这样做。
我需要以某种方式重置不同的值。
//子组件的html部分
<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 子组件的一部分
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$
流:
-第一页尝试=>值:0-
滚动到底部(+100)=>值:100-
滚动到底部(+100)=>值:200-
滚动到底部(+100)=>值:300
- 使用过滤器之一 => 值:0
- 滚动到底部 (+100) => 值:100
- 滚动到底部 (+100) => 值:200
解决方案
你可以这样处理
this.resets$ = new Subject();
this.resets$.pipe(
startWith(null),
switchMap(() => this.pageByScroll$.pipe(
startWith(0),
distinct()
))
).subscribe(this.index);
这将“范围”distinct
运算符switchMap
,您可以手动重置它this.resets$.next(null)