在Angular 7应用程序中,树状视图中有5000多个元素。我需要访问已选择的DOM元素,因此可以使用类似scrollIntoView
的东西。基本上我的伪代码看起来像这样:
if selected element is not visible
call scrollIntoView on the element
问题是,每次按下键盘时(上下箭头),我需要调用此方法。我尝试传递$event
来查找上一个元素,下一个元素,依此类推,因此我可以简单地在该元素上调用scrollIntoView()
,但我认为这不是一个好主意。它涉及很多递归(因为树视图是嵌套的),并且我的HTML永远都不会改变(除非我也更新代码)。
是否可以根据条件设置ViewChild()
?这样,我可以简单地执行this.selectedElement.nativeElement.scrollIntoView()
之类的事情。除非有更好的主意?
答案 0 :(得分: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);
}
}