Duy trì vị trí cuộn trong danh sách khi các mặt hàng mới được thêm vào

Question

Tôi có một danh sách các mục mà tôi đang hiển thị sử dụng *ngFor

<div id="container"> 
    <div 
     [class.selected]="selectedItem.id == item.id" 
     #container 
     *ngFor="let item of items; indexBy: byId">{{item.name}}</div> 
</div> 

tôi tiếp tục cập nhật các mảng danh sách theo định kỳ.

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

Tôi có một selectedItem được sử dụng để đánh dấu một mục được chọn.

Khi tôi cập nhật danh sách, các mục mới có thể được thêm vào phía trên mục đã chọn (chủ yếu) và bên dưới mục đã chọn. Khi điều đó xảy ra, mục được chọn sẽ di chuyển ra khỏi vị trí xem hiện tại. Tôi muốn điều chỉnh scrollOffset của div cha mẹ như vậy là vị trí của các mục trong danh sách vẫn ở cùng một vị trí xem.

Cập nhật:

Để làm điều này, tôi tiết kiệm

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

và thêm một dòng sau khi cập nhật this.items

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

doesnt này làm việc nhưng, gói này với các công trình thời gian chờ chính xác như tôi muốn.

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

Sau khi cập nhật this.items, có sự chậm trễ trong việc hiển thị các phần tử dom mới.

Làm cách nào để có được sự kiện mà các thành phần mới đã được thêm vào?

Answer 1

Tôi nghĩ rằng một cái gì đó như thế này sẽ làm việc cho bạn:

Template

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

Component

@ViewChild('cont') contEl: any; 

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

    // ...Item added 

    this.contEl.scrollTop = current; 
} 

Vì vậy, bạn sử dụng @ViewChild trang trí để có được yếu tố trong thành phần của bạn. Sau đó, bạn chụp scrollTop trước khi một mục mới được thêm vào và bạn đặt nó trở lại sau khi mục được thêm vào.