angular - 向 NgRx 商店添加元素后的 Angular scrollIntoView

Question

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

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

如果我单击“添加项目”按钮，则该项目将添加到 NgRx 商店。

我现在想scrollIntoView在添加新项目时调用项目引用。我试图调用或调用该项目scrollIntoView，但它也会在页面加载时触发。我只想在将项目添加到列表并呈现时将其置于页面中心。ngOnInitngAfterViewInit

我怎样才能做到这一点？

Answer 1

我能想到的：

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

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>

现在，当项目更新时，您可以滚动查看。

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