如何遍历 ViewContainerRef 中的组件列表？

Question

我正在尝试在 ViewContainerRef 中存在的组件列表上实现键盘导航，但不知道实际存在多少组件。

当前方法：现在在 ViewContainerRef 中添加组件时，我将组件索引存储在视图中，并将 ComponentRef 作为对象一起存储在列表中，即：

{ component : ComponentRef<any>, index: number }

我通过在ViewContainerRef 上执行indexOf 来获取索引。 对于键盘导航，我正在监听事件并遍历我在上面创建的列表并跟踪当前选择的组件。 能否以更好的方式做到这一点？

Answer 1

ViewContainerRef 具有吸气剂 length 和 get ([])

selectedIndex:number = 0;

cursorUp() {
  if(this.selectedIndex > 0) {
    this.selectedIndex--;
  }
  console.log('selectedComponent', this.vcRef[this.selectedIndex]);
}

cursorDown() {
  if(this.selectedIndex < this.vcRef.length - 1) {
    this.selectedIndex++;
  }
  console.log('selectedComponent', this.vcRef[this.selectedIndex]);
}