时间戳

首页 > 解决方案 > Angular（TypeScript）：如何按类滚动到选定的元素

angular - Angular（TypeScript）：如何按类滚动到选定的元素

问题描述

请不要将此标记为重复，我搜索并搜索并找不到解决方案

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

在我看来，我在具有垂直滚动集的侧边栏中展示了这些订单及其详细信息：

<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>

在我的主要内容中，当我单击标记时，我的地图具有标记我希望选择正确的顺序，并且我希望侧边栏滚动并专注于正确的顺序。

这是我尝试过的：

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 解决方案吗？

标签： angulartypescript

解决方案

您可以使用ElementRef和来做到这一点scrollIntoView。

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

...

contructor(private el: ElementRef) { }

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

推荐阅读