带附加元素的无限滚动angular2

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

目前我尝试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>

这种做法导致该元素获取他们的数据（什么导致不可接受的延迟）。我想如果能够实现在路由器模块中使用子组件来实现这样的事情（但是这听起来很糟糕，因为我没有有限的帖子列表）。

任何人都有想法如何添加新的元素，而不重复那些已经渲染？

来源

2017-09-19 M. Spencer

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

1 - 将滚动事件添加到您的目标股利。（跟踪滚动事件，当条件满足创建后的组件。） 2 - 添加NG-模板的DIV中（注入在DOM模板）

HTML

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

在您的TS文件，添加将动态地创建基于条件的，当你有滚动（你的目标股利例如80％）

一个组件的功能

@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; 
}

希望能帮到你。

来源

2017-09-19 21:51:40 Flaugzig

带附加元素的无限滚动angular2

回答

相关问题