Угловой scrollIntoView после добавления элемента в хранилище NgRx

Question

У меня есть список элементов, которые динамически добавляются в мое представление и хранятся в NgRx:

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

Если я нажимаю кнопку "Добавить элемент", элемент добавляется в магазин NgRx.

Я сейчас хочу позвонить scrollIntoView на ссылку на элемент при добавлении нового элемента. Я пытался позвонить scrollIntoView в ngOnInit или же ngAfterViewInit элемента, но он срабатывает также при загрузке страницы. Я хочу центрировать элемент на странице только тогда, когда он добавлен в список и отображается.

Как мне этого добиться?

Answer 1

Что я могу думать:

Создайте переменную, указывающую индекс вновь добавленного элемента внутри элементов

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

В вашей функции addItem() обновите index.

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();
})