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

Question

我有一个我正在使用的项目列表 *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元素会有延迟.

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

Answer 1

我认为这样的事情对你有用：

模板

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

成分

@ViewChild('cont') contEl: any;

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

   // ...Item added

   this.contEl.nativeElement.scrollTop = current;
}

所以你使用@ViewChild装饰器来获取组件中的元素。然后scrollTop在添加新项目之前捕获 ，并在添加项目后将其设置回来。