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

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