带有附加元素的无限滚动angular2

Question

我想实现无限滚动，其关键特性是可以添加新元素而不是实现列表的全部内容。

目前我尝试使用 ng-infinite-scroll 但由于使用 ngFor 它每次都从头开始呈现整个列表。

<div style="width: 750px;">
<div class="posts-list" 
infinite-scroll 
[infiniteScrollDistance]="2" 
[infiniteScrollThrottle]="300" 
(scrolled)="onScrollDown()">
    <post-component *ngFor="let item of array" [dataHref]="item"></post-component>
</div>

这种方法导致元素获取它们的数据（导致不可接受的延迟）。我想是否可以通过路由器模块中的子组件来实现这样的事情（但这听起来很糟糕，因为我没有有限的帖子列表）。

有人知道如何添加新元素而不重复已经呈现的元素吗？

Answer 1

创建无限滚动的一种方法如下。

1 - 将滚动事件添加到您的目标 div。（跟踪滚动事件，并在满足条件时创建一个 post 组件。） 2 - 在 div 中添加 ng-template（在 DOM 中注入模板）

HTML

<div style="width: 750px;">
   <div class="posts-list"(scroll)="onScroll($event)">
      <ng-template #post></ng-template>
   </div>
</div>

在您的 ts 文件中，添加一个函数，该函数将在您滚动时根据条件动态创建组件（例如，目标的 80% div）

TS

@ViewChild('post') element: ElementRef;

constructor(private viewContainerRef: ViewContainerRef, private componentFactoryResolver: ComponentFactoryResolver){}

onScroll($event): void {
  // apply condition eg. when 80 % of div is scrolled
  if(conditionIsMet){
    this.loadPostComponent();
  }
}

loadPostComponent() {
  let postComponent = this.componentFactoryResolver.resolveComponentFactory(PostComponent);
  let componentRef = this.element.createComponent(postComponent);
  (<PostComponent>componentRef.instance).data = post.data;
}

希望对你有帮助。

带有附加元素的无限滚动angular2

Infinite scroll with appending elements angular2

infinite-scroll

typescript

angular