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。（跟踪滚动事件，并在满足条件时创建帖子组件。） 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文件中，添加一个函数，当你有滚动时，它会根据条件动态创建一个组件（例如你目标div的80％）

<强> 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

1 个答案: