Угловой 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 () обновите индекс.

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