渲染SelectRootElement可使scrollIntoView快速运行

时间:2019-09-17 07:05:35

标签: angular typescript

我正在使用scrollIntoView转到所选元素。它工作正常,但是当数据超过50个列表时,滚动到选择的元素需要5分钟以上。我不知道如何使其快速滚动到选定的元素。 希望大家能帮助我。拜托!

HTML

Search-result-component.html

<app-result-details (expand)="onExpandDetails($event)" *ngFor="let d of detail.value" [data]="d"></app-result-details>

result-detail-component.html

<div fxLayout="column" fxLayoutGap="25px">
    <div [className]=" detailData.selected ? 'selected' : 'inactive'"></div>
   <mat-card [id]="detailData.key" (click)="expandToggle($event, true, detailData.detail.reffId)"
[class.expanded]="expanded" [style.border]="detailData.selected ? '2.5px solid #FD8023' : ''">
<!-- content here-->
  </mat-card>
</div>

组件

result-detail-component.ts

@Input("data") detailData : any = {};
constructor(private renderer: Renderer2, private elem: ElementRef) {};

ngAfterViewInit(): void  {
    const fragment = 'selected';
    const element = this.renderer.selectRootElement(`.${fragment}`);
    element.scrollIntoView({ behavior: 'smooth', block: "start" });
  }

0 个答案:

没有答案