Angular 根据条件设置ViewChild

在Angular 7应用程序中，树视图中有5000多个元素。我需要访问已选择的DOM元素，以便可以使用以下内容。基本上，我的伪代码如下所示：

if selected element is not visible
    call scrollIntoView on the element

问题是，每次按下键盘（上下箭头）时，我都需要调用它。我尝试传入

$event

以查找上一个元素、下一个元素等等，因此我可以简单地对该元素调用

scrollIntoView（）

，但我认为这不是一个好主意。它涉及大量递归（因为树视图是嵌套的），我的HTML永远不会改变（除非我也更新代码）

---

是否可以根据条件进行设置？这样我就可以简单地执行

这个操作。selectedElement.nativeElement.ScrollingToView（）

或者类似的操作。除非有更好的主意？

这不是很清楚，但如果我理解正确，您可以使用

@ViewChildren

，这基本上是几个

@ViewChildren

展示了如何使用它，正如您所看到的，它非常容易使用

从'@angular/core'导入{Component，QueryList，ElementRef，ViewChildren}；
@组成部分({
选择器：“我的应用程序”，
模板：`
这是divn°{{index}
`,
样式URL:['./app.component.css']
})
导出类AppComponent{
@ViewChildren（'divs'）divs:QueryList；
名称='角度'；
悬停（div:htmldevelment）{
//从查询列表中获取
const对应=this.divs.find（_div=>_div.nativeElement===div.nativeElement；
//它们是一样的
控制台日志（对应）；
console.log（对应===div）；
控制台日志（div）；
}
}

问题是我只想要一个ViewChild（或ViewChildren）。ViewChildren可以工作，但我需要一种有条件地说“如果我的ViewChildren有xxx属性”的方法，我可以通过某种方式设置它，然后它就可以工作了。我只需要一个元素，就是选中的元素。正如您在stackblitz中看到的，它只返回一个元素，其中包含您在其上声明的任何内容（例如，

活动的

类）。好的，让我进一步分解它，以便更容易理解。看看这个StackBlitz:“对应”元素从未更新为新元素，即使我将所选元素更改为新元素。要测试它，请单击列表中的第一个元素，然后按向下箭头键。这是因为您的代码不应该做您期望它做的事情。在中，您可以看到它工作得很好（我没有保护箭头键，所以不要单击第一个或最后一个项目来测试！）嵌套元素呢？正如我在作品中所解释的那样，使用简单的HTML，我只需要在每个div后面加上div就足够简单了。但是当涉及到嵌套元素时（想想ul和li标签），情况就完全不同了。下面是一个示例（演示中只有向下箭头起作用），其中我嵌套了ul和li标签：（与您提供的其他StackBlitz有点不同，但它应该有意义）。也许这个链接会帮助你：。@shashikantevani，除了我只需要我的唯一元素。然后你可以通过

ngFor

@shashikantevani传递索引，这会有什么帮助？