Установить 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.

Этот стек * блик показывает, как вы можете его использовать, и, как вы видите, его очень легко использовать.

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