根据条件设置 ViewChild

Question

在我的 Angular 7 应用程序中，我在树形视图中有超过 5000 个元素。我需要访问已选择的 DOM 元素，所以我可以使用类似scrollIntoView 的东西。基本上我的伪代码如下所示：

if selected element is not visible
    call scrollIntoView on the element

问题是，每次按下键盘时我都需要调用它（向上和向下箭头）。我试过传入$event 来查找前一个元素、下一个元素等等，所以我可以简单地在那个元素上调用scrollIntoView()，但我认为这不是一个好主意。它涉及大量递归（因为树视图是嵌套的）并且我的 HTML 永远不会改变（除非我也更新代码）。

是否可以根据条件设置ViewChild()？这样我就可以简单地做this.selectedElement.nativeElement.scrollIntoView() 或类似的事情。除非有更好的主意？

Answer 1

这个不是很清楚，不过如果我理解正确的话，你可以使用@ViewChildren，基本上就是几个@ViewChild。

This stackblitz 展示了如何使用它，并且如您所见，它非常易于使用。

import { Component, QueryList, ElementRef, ViewChildren } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<hello name="{{ name }}"></hello>
<div 
  *ngFor="let index of [1, 2, 3, 4, 5]" 
  (mouseover)="hovered(divs)"
  #divs>
  This is the div n° {{ index }}
</div>`,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  @ViewChildren('divs') divs: QueryList<ElementRef<HTMLDivElement>>;

  name = 'Angular';

  hovered(div: HTMLDivElement) {
    // Getting from the query list
    const corresponding = this.divs.find(_div => _div.nativeElement === div).nativeElement;

    // they are the same
    console.log(corresponding);
    console.log(corresponding === div);
    console.log(div);
  }
}