Angular中嵌套列表与普通列表的上下箭头键导航实现

问题描述 #

需要实现两个列表的上下箭头键导航功能，其中第一个列表包含ngFor渲染的嵌套子列表，要求上下箭头能遍历所有选项（包括子列表项），现有代码无法达成预期效果。

现有代码 #

HTML模板

<input (keyup)="keyDown($event)"/>
<div>
  <h4>Filters Names</h4>
  <ul>
    <li *ngFor="let filter of filters; let i = index;" [class.activeSearchLink]="i === linkIndex"> 
     {{filter.name}}
        <div *ngFor="let subFilter of filter.subFilters">
           {{subFilter.name}}
        </div>
    </li>
</ul>
<h4>Filters Values</h4>
<ul>
  <li *ngFor="let value of filters.values; let i = index;" [class.activeSearchLink]="i === linkIndex"> 
    {{item.name}}
   </li>
 </ul>
 </div>

TypeScript组件代码

keyDown(event) {
  switch (event.keyCode) {
      case 38: 
                this.linkIndex--;
              break;
      case 40: 
                this.linkIndex++;
              break;

  }
}

问题分析 #

1. 单一索引变量不足：linkIndex无法区分主列表项、子列表项和第二个列表的项，嵌套结构和多列表导致总可导航项不是简单的数组索引叠加。
2. 子列表未纳入导航：当前逻辑仅处理了第一个列表的主项索引，完全忽略了子列表项。
3. 多列表索引冲突：两个列表共用同一个linkIndex，会导致索引混乱（比如第一个列表遍历完后无法正确切换到第二个列表）。

解决方案 #

核心思路是构建一个扁平化的可导航项数组，把所有需要通过箭头键选中的项（主filter、subFilter、values项）统一整合，再基于这个数组实现索引导航。

步骤1：定义数据结构与扁平化数组

在组件中先定义可选的类型，然后生成扁平化的导航项数组：

// 定义项的类型，方便区分来源
interface NavItem {
  label: string;
  type: 'filter' | 'subFilter' | 'value';
  source?: any; // 可选，保存原数据对象
}

export class YourComponent {
  filters = {
    // 示例数据结构，可替换为你的实际数据
    list: [
      { name: 'Filter 1', subFilters: [{ name: 'Sub 1-1' }, { name: 'Sub 1-2' }] },
      { name: 'Filter 2', subFilters: [{ name: 'Sub 2-1' }] }
    ],
    values: [{ name: 'Value 1' }, { name: 'Value 2' }]
  };
  navItems: NavItem[] = [];
  activeIndex = -1; // 初始无选中项

  ngOnInit() {
    // 构建扁平化导航数组
    // 1. 添加主filter项
    this.filters.list.forEach(filter => {
      this.navItems.push({ label: filter.name, type: 'filter', source: filter });
      // 2. 添加子filter项
      filter.subFilters.forEach(sub => {
        this.navItems.push({ label: sub.name, type: 'subFilter', source: sub });
      });
    });
    // 3. 添加values项
    this.filters.values.forEach(val => {
      this.navItems.push({ label: val.name, type: 'value', source: val });
    });
  }
}

步骤2：修改键盘事件处理逻辑

更新keyDown方法，处理上下键并限制索引边界：

keyDown(event: KeyboardEvent) {
  // 阻止默认行为（避免页面滚动）
  event.preventDefault();
  
  switch (event.key) {
    case 'ArrowUp':
      if (this.activeIndex > 0) {
        this.activeIndex--;
      }
      break;
    case 'ArrowDown':
      if (this.activeIndex < this.navItems.length - 1) {
        this.activeIndex++;
      }
      // 初始状态下按向下键选中第一个项
      if (this.activeIndex === -1) {
        this.activeIndex = 0;
      }
      break;
  }
}

步骤3：更新HTML模板匹配激活状态

修改模板，根据扁平化数组的索引和项类型，给对应的DOM元素添加激活类：

<input (keyup)="keyDown($event)" />
<div>
  <h4>Filters Names</h4>
  <ul>
    <li *ngFor="let filter of filters.list; let filterIdx = index"
        [class.activeSearchLink]="activeIndex === getFilterNavIndex(filterIdx)"> 
      {{filter.name}}
      
      <div *ngFor="let subFilter of filter.subFilters; let subIdx = index"
           [class.activeSearchLink]="activeIndex === getSubFilterNavIndex(filterIdx, subIdx)">
        {{subFilter.name}}
      </div>
    </li>
  </ul>

  <h4>Filters Values</h4>
  <ul>
    <li *ngFor="let value of filters.values; let valIdx = index"
        [class.activeSearchLink]="activeIndex === getValueNavIndex(valIdx)"> 
      {{value.name}}
    </li>
  </ul>
</div>

步骤4：添加辅助方法计算导航索引

在组件中添加三个辅助方法，用来映射原DOM结构中的项到扁平化数组的索引：

// 获取主filter在navItems中的索引
getFilterNavIndex(filterIdx: number): number {
  let offset = 0;
  for (let i = 0; i < filterIdx; i++) {
    offset += 1 + this.filters.list[i].subFilters.length; // 主项+对应子项数量
  }
  return offset;
}

// 获取子filter在navItems中的索引
getSubFilterNavIndex(filterIdx: number, subIdx: number): number {
  return this.getFilterNavIndex(filterIdx) + 1 + subIdx;
}

// 获取value项在navItems中的索引
getValueNavIndex(valIdx: number): number {
  // 计算filters部分的总项数
  const filtersTotal = this.filters.list.reduce((total, filter) => {
    return total + 1 + filter.subFilters.length;
  }, 0);
  return filtersTotal + valIdx;
}

说明 #

• 扁平化数组确保所有可导航项按顺序排列，箭头键只需遍历这个数组的索引即可实现连续导航
• 辅助方法用来映射原DOM结构中的项到扁平化数组的索引，保证激活状态正确对应
• 可根据需求调整activeSearchLink类的样式，突出显示当前选中项

内容的提问来源于stack exchange，提问作者Vitali