Question

我在Angular 7中做了一个非常基本的树视图。我基本上有一个对象数组，可以在其中选择一个项目，然后使用箭头键选择下一个。问题是，我希望它的行为接近Windows资源管理器，因此，如果滚动到overflow:auto div中的最后一个元素，则在滚动到时应显示下一个元素（不在屏幕上）。它。在下面的Angular示例中，它只是从屏幕上选择了元素。

https://stackblitz.com/edit/angular-eavqd6

所选元素仅基于：

public selected: string;

我只是简单地根据所按的箭头键来增加或减少。然后，我通过执行以下操作将selected类添加到元素：

class="{{item.ordering == selected ? 'selected' : ''}}"

如果我想滚动选定的元素到视图中，我一直在考虑使用scrollIntoView函数，但是我不确定在性能方面是否有效（也不知道如何实现）它）。

我可以给每个元素一个唯一的ID，以期提高性能，但我不确定它是否足够有效。

知道我能做什么吗？

Answer 1

您不需要为每个商品提供一个ID；您可以为容器指定一个ID，然后使用索引选择项目。

如果您访问容器div，如下所示：

<div #container>
  <p *ngFor="let item of list" class="{{item.ordering == selected ? 'selected' : ''}}">{{item.name}}</p>
</div>

在组件中：

@ViewChild("container")
public container: ElementRef;

然后，您可以创建一个使用selected属性的函数来找到相关项目：

private scroll() {
    const elm = this.container.nativeElement.children[this.selected - 1];
    if (elm) {
      elm.scrollIntoView();
    }
}

Here is an example in StackBlitz

将选定的树视图元素保留在屏幕上（例如Windows资源管理器）

1 个答案: