Angular 向NgRx存储添加元素后的角度滚动视图

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

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

如果单击“添加项目”按钮，项目将添加到NgRx存储

现在，我想在添加新项目时调用项目引用上的

scrollIntoView

。我试图在项目的

ngOnInit

或

ngAfterViewInit

处调用

scrollIntoView

，但它也在页面加载时被触发。我只想在将项目添加到列表并呈现时将其置于页面中心

我怎样才能做到这一点？

我能想到的是：

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

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

在addItem（）函数中，更新索引

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

}

使用ViewChildren装饰器获取所有组件项

@ViewChildren(AppItemComponent) appitems: QueryList<AppItemComponent>

---

为什么在将项添加到组件中的项$observable之后不能调用“scrollIntoView”方法。您可以在setTimeout（（）=>{}）中包含这些代码块。setTimeout（）不是一个难看的补丁吗？我不想出去做这件事。至于可观察的，我不确定我是否理解你的意思。你能提供示例代码吗？这是一个非常好的方法！我想知道是否有一种解决方案，您不需要依赖具有

ViewChildren

引用的父组件。同时我会记下你的答案。

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