angular – 在添加新项目时保持列表中的滚动位置

前端之家收集整理的这篇文章主要介绍了angular – 在添加新项目时保持列表中的滚动位置前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个项目列表,我使用* ngFor显示
<div id="container">
  <div 
      [class.selected]="selectedItem.id == item.id"
      #container 
      *ngFor="let item of items; indexBy: byId">{{item.name}}</div>
</div>

我会定期更新列表数组.

this.listService.index((items) => this.items = items)

我有一个selectedItem,用于突出显示选择的项目.

当我更新列表时,可以在所选项目(大部分)上方和所选项目下方添加新项目.当发生这种情况时,所选项目将远离当前视图位置.
我想调整父div的scrollOffset是这样一种方式,列表中项目的位置保持在相同的视图位置.

更新:

要做到这一点,我正在拯救

this.offset; = this.container.scrollHeight - this.container.scrollTop;

并在更新this.items后添加了一行

this.listService.index((items) => {
  this.items = items
  this.container.scrollTop = this.container.scrollHeight - this.offset;
})

这不起作用,但用超时包装这个工作正是我想要的.

setTimeout(() => {
  this.scrollPosition.restore()
},300)

更新this.items后,渲染新的dom元素会有延迟.

如何获得添加新元素的事件?

我觉得这样的事情对你有用:

模板

<div id="container" #cont>...

零件

@ViewChild('cont') contEl: any;

thisIsCalledWhenNewItemISAdded() {
   let current = this.contEl.scrollTop;

   // ...Item added

   this.contEl.scrollTop = current;
}

因此,您使用@ViewChild装饰器来获取组件中的元素.然后在添加新项目之前捕获scrollTop,并在添加项目后将其设置回来.

猜你在找的Angularjs相关文章