Angular ( typescript ): How to scroll to selected element by class

Question

请不要将此标记为重复，我已经搜索了又搜索，但找不到解决方案

假设我有一个名为“订单”的订单列表

在我看来，我在设置了垂直滚动的侧边栏中呈现这些订单及其详细信息:

<div>

    <div id="main-content">
        Main Content
    </div>

    <div id="sidebar">

        <div *ngFor="let order of orders" [ngClass]="{'selected-order': selectedOrder == order}>
           <div>order.orderNumber</div>
           <div>order.orderDetails</div>
        </div>

    </div>

</div>

在我的主要内容中，我的 map 上有标记，当我单击标记时，我希望选择正确的顺序，并且希望侧边栏滚动并聚焦于正确的顺序。

这是我尝试过的:

function selectMarker() {

    //...omitted code

    // scroll to correct marker in sidebar
    var offset = $(".selected-order").offset();
    $('#sidebar').animate({
        scrollTop: offset.top,
        scrollLeft: offset.left
    }, 1000);
}

这不起作用，它没有选择正确的元素。

是否有纯粹的 Typescript/Angular 解决方案？

Answer 1

您可以使用 ElementRef 和 scrollIntoView 来完成此操作。

import { ElementRef } from '@angular/core';

...

contructor(private el: ElementRef) { }

function selectMarker() {
    this.el.nativeElement.querySelector('.selected-order').scrollIntoView();
}