如果BehaviorSubject在无限滚动期间多次调用,则可能会导致不必要的数据加载和性能问题。为了解决这个问题,您可以将订阅函数的代码移到一个独立的函数中,并将其从无限滚动事件中调用。
以下是一个示例代码片段:
import { Component } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { MyDataService } from './my-data.service';
@Component({
selector: 'my-component',
template: `
{{ data }}
Loading...
`,
})
export class MyComponent {
myData: Array = [];
loading: boolean = false;
private pageSubject: BehaviorSubject = new BehaviorSubject(1);
constructor(private dataService: MyDataService) {}
ngOnInit() {
this.pageSubject.subscribe(page => {
this.loading = true;
this.dataService.getData(page).subscribe(data => {
// Add new data to existing array
this.myData = this.myData.concat(data);
this.loading = false;
});
});
}
onScroll() {
// Get current page number
const currentPage = this.pageSubject.getValue();
// Increment page number and emit new value to pageSubject
this.pageSubject.next(currentPage + 1);
}
}
在此示例中,我们将无限滚动事件的代码转移到了名为pageSubject
的BehaviorSubject订阅函数中。这样,每当用户滚动到可见区域的底部,都会自动调用onScroll()
函数,该函数将使用当前pageSubject
的值来获取新的数据页,并将其添加到现有数据中。 loading
属性用于在数据加载期间显示加载指示器。