Javascript 角度：将动态元素滚动到视图中，只知道其ID

我有一个以异步方式获取数据的动态列表，并希望在加载列表时将特定元素滚动到视图中

该列表与此类似：

<div class="items" *ngFor="let item of functionThatGetsItems(); let i = index" [id]="'MyList' + i">
    <div class="title">
        {{ item.title }}
    </div>
    <div class="content">
        {{ item.content }}
    </div>
  </div>      

{{item.title}
{{item.content}

如您所见，这些项目分配了一个简单的ID，即基本字符串及其编号。假设我想触发滚动到MyList31。加载并呈现列表后，如何获取具有此类ID的元素并滚动到该元素

---

我四处搜索，找到了不应该这样做的方法，以及如何使用ViewRefs这样做，但这些方法似乎对动态元素不起作用，或者它们对吗？我该怎么做

这不是严格意义上的角度，但您可以执行

document.querySelector（“#MyList31”）.scrollIntoView（）

参考文献

---

为了做到这一点，本文可能会帮助您

我使用属性绑定解决了这个问题

首先，当我收到定义滚动到哪个项目的参数时，我将其保存为组件属性

this.toScrollInto=Object.keys（params）[0]

然后，在构建它的ngFor内部，我绑定到它并利用短路来调用一个函数（如果存在匹配项）

<div class="items" *ngFor="let item of functionThatGetsItems(); let i = index" 
    #itemRef
    [class.scrolled]="i == this.toScrollInto && scrollIntoView(itemRef)">

    <div class="title">
        {{ item.title }}
    </div>
    <div class="content">
        {{ item.content }}
    </div>
  </div>  


{{item.title}
{{item.content}


然后，函数
scrollIntoView（Element）
使用提供的角度引用处理滚动。
使用模板引用并调用本机
scrollIntoView（）
方法。在html中：

<h2 #scrollToMe>Hi there</h2>

行为：“平滑”
为过渡设置动画。
您希望id位于ng for创建的实际项目上，而不是ng for本身。这将消除从组件向列表传递数据时对任何额外逻辑的需要


//在ngAfterViewInit（）内确保列表项呈现，如果您使用@Inputs预期实时数据，则在ngAfterViewChecked（）内
const itemToScrollTo=document.getElementById（'item-'+id）；
//空检查以确保元素实际存在
如果（itemToScrollTo）{
itemToScrollTo.ScrollToView（true）；
}

{{item.title}
{{item.content}
根据目标浏览器的支持，您也可以使用此方法平滑滚动。是的，确实有效！但在其他来源上，您可以看到AngularJS不鼓励使用此方法，因为它访问本机浏览器API。@ChrisJaquez好吧，检查我添加的文章，我不太习惯AngularJS来给出具体的答案，对不起，这篇文章是针对AngularJS的，我使用的是Angular，这是一个明显不同的版本。不用担心，谢谢。看一看。我想你不想在第三行的
itemRef
条目前面出现“#”，也就是说，它应该是
[class.scolled]=“I==this.toScrollInto&&scrollIntoView（itemRef）”>
。
true
值是
scrollIntoView
的默认值。
@ViewChild('scrollToMe') scrollToMe: ElementRef;

...


this.scrollToMe.nativeElement.scrollIntoView({ behavior: 'smooth' })