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提供。

你可以这样做

首先，声明一个引用窗口对象的变量

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

如何滚动到ngFor中的指定组件选择器？

2 个答案: