向NGRX商店添加元素后，Angular scrollintoview

Question

我有一个动态添加到我的视图并存储在ngrx中的项目列表：

<app-item *ngFor="let item of items$ | async"></app-item>

如果我单击"添加项目"按钮，则将项目添加到NGRX商店。

我现在想在添加新项目时在项目参考上调用scrollIntoView。我尝试在该项目的ngOnInit或ngAfterViewInit上调用scrollIntoView，但也会在页面加载上触发。我只想将其添加到列表中并将其渲染时将其集中在页面中。

我该如何实现？

Answer 1

我能想到的：

创建一个指示新添加的项目索引的变量

newestIndex; //the index of the newly added item inside items.

在您的additem（）函数中，更新索引。

addItem(item){
  // update item , update ngrx store and also update the newestIndex.   
}

使用ViewChildren Decorator获取所有组件项目

@ViewChildren(AppItemComponent) appitems: QueryList<AppItemComponent>

现在，当项目更新时，您可以滚动到视图中。

items$.pipe(skip(1))     //skip first value as it is not caused by add item.
.subscribe( items =>{
    this.appitems[newestIndex].nativeElement.scrollIntoView();
})