如何使Angular 7滚动到使用ngFor重复的组件

Question

我有一个循环模板，当该项目处于活动状态时，我需要滚动到特定项目我该怎么做。

我的模板循环是：

<div class="tabs-list-item-container"> <!-- this is a horizontal scrollable wrapper -->
   <app-tab-list-item *ngFor="let tab of tabs" [tabSession]="tab" [class.active]="tab.isActive"></app-tab-list-item>
</div>

标签对象有 isActive 属性，我需要使用它并滚动到该组件可以实现吗？

Answer 1

当用户选择一个项目时，应该调用下面的方法。 scrollIntoView() 将滚动到具有 .active 类的元素

scrollToActive() {
   document.querySelector('.active').scrollIntoView();
}