Question

我在Angular5应用中使用的是ngx-perfect-scrollbar 5.5.12。

滚动条到达屏幕底部时，我将加载更多数据，例如无限滚动。

app.component.html

<perfect-scrollbar
    [config]="config"
    (psYReachEnd)="onReachEnd()">

但是问题在于它会多次触发该方法。

app.component.ts

  onReachEnd() {
    console.log('log several times here');
  }

我不确定在更高版本中是否已解决此问题，但我现在正在使用v.5.5.12。

是否可以解决此问题？或任何其他方式？谢谢。

Answer 1

我在项目中遇到了同样的问题。版本：“ 7.1.0”。

因此，我的解决方案是创建一些布尔变量以加载更多项目。当您从API加载某些数据时，请将其设置为true-之后将其设置为false。

在函数中使用它的示例。

onReachEnd(): void {
  if (this.isLoadingData) {
    return;
  }

  // Call the API/function for more items here
}

由于我不知道您是否有处理请求等的服务。我将通过BehaviorSubject向您展示一些示例。

假设您的服务名为dataService。我们可以在此处创建BehaviorSubject-isLoadingData。

private isLoadingDataBehaviorSubject BehaviorSubject<boolean> = new BehaviorSubject(false);

，由于它是服务，因此我们可以在此处public创建可观察的： isLoadingData = this.isLoadingDataBehaviorSubject.asObservable（）;`

现在，当我们了解了所有信息后，就可以创建函数以在此服务内调用API：

loadData(): Observable<any> {
  this.isLoadingDataBehaviorSubject.next(true);
  return this.http.get(url).pipe(
    tap((response) => {
        this.isLoadingDataBehaviorSubject.next(false);
        return response;
    }),
    catchError((error: HttpErrorResponse) => {
        this.isLoadingDataBehaviorSubject.next(false);
        return of({});
    })
  );
}

您还必须在组件内部订阅此isLoadingData并设置其值。例如，最简单的方法：

ngOnInit(): {
    this.dataService.isLoadingData.subscribe(x => {
        this.isLoadingData = x;
    });
}

Angular5 Perfect滚动条psYReachEnd触发事件多次

1 个答案: