Как прокрутить до указанного селектора компонентов внутри ngFor?

Question

У меня есть несколько компонентов, работающих внутри * ngFor на одной странице.Я хочу, чтобы в верхней части страницы были ссылки на несколько кнопок, которые можно было бы прокрутить до компонента после нажатия.

Вот коды, которым я пытаюсь следовать.

в html-файле:

<button (click)="scroll(target)"></button>
<div #target>Your target</div>

и в файле ts:

scroll(el: HTMLElement) {
    el.scrollIntoView();
}

но я не знаю, как я могу ссылаться на каждый из селекторов компонентов

Вот некоторые из моего кода, пока не реализованного кода выше:

//There will be many buttons to link to each of the component.

<button type="button" (click)="scroll()">Click this button to navigate</button>

<div *ngFor="let appdata of appData">
    <app-details [value]="appdata"></app-details>
</div>

'appdata' являетсяПеременная json, включая такие атрибуты, как appID (который может однозначно идентифицировать компонент), заголовок, описание и т. д.

Посоветуйте, пожалуйста, как я могу ссылаться на компоненты и, возможно, предложить, как его реализовать.Спасибо !!

Answer 1

Для прокрутки к элементу мы можем использовать функцию window.scrollTo (xpos, ypos) , предоставляемую javascript.

вы можете сначала сделать это

,объявите переменную, которая ссылается на окно Object

win:Window=window;

, затем определите функциональность прокрутки

  scroll(component){
        this.win.scrollTo(0,component.offsetTop);
   }

, где параметр компонента указывает на конкретный элемент.и component.offsetTop дает позицию y этого элемента.

, а в HTML

   <span *ngFor="let target of  win.document.getElementsByTagName('app-details');let i=index" >
        <button  (click)="scroll(target)"  > Go TO {{i}}</button></span>

Answer 2

Вы можете написать что-то вроде этого.

<div *ngFor="let appdata of appData; let i = index;">
    <app-details [id]="i" [value]="appdata"></app-details>
</div>

при нажатии кнопки прокрутки вы можете записать свой TS, чтобы сосредоточиться там:

const element = document.querySelector(id); // id of the scroll to element
element.scrollIntoView();