Angular模板实现带广度优先全局索引的二级嵌套列表咨询

要搞定这个需求，咱们分两步来：先给所有节点做广度优先遍历并加上全局索引，再在模板里渲染嵌套列表并绑定点击事件。下面是具体的实现方案：

1. 定义数据类型并生成全局索引 #

首先得扩展原始数据的类型，加个index字段存索引。然后写个广度优先遍历的方法，给每个节点按顺序分配索引值。

组件代码 #

import { Component } from '@angular/core';

// 扩展节点类型，新增index字段
interface Node {
  name: string;
  color?: string;
  size?: number;
  children?: Node[];
  index?: number;
}

@Component({
  selector: 'app-nested-list',
  templateUrl: './nested-list.component.html',
  styleUrls: ['./nested-list.component.css']
})
export class NestedListComponent {
  // 原始数据（忽略根节点，直接用children数组）
  data = { 
    "name": "Exceptions", 
    "color": "white", 
    "children": [ 
      { "name": "New", "color": "peru", "children": [ 
        { "name": "Amount Break", "size": 1, "color": "deepskyblue" }, 
        { "name": "Amount Break", "size": 1, "color": "dodgerblue" } 
      ] }, 
      { "name": "Active", "color": "chocolate", "children": [ 
        { "name": "Amount Break", "size": 2, "color": "deepskyblue" }, 
        { "name": "Amount Break", "size": 2, "color": "dodgerblue" } 
      ] } 
    ] 
  };

  // 处理后带索引的节点数组
  indexedNodes: Node[] = [];

  ngOnInit() {
    this.generateIndexedNodes();
  }

  // 广度优先遍历生成全局索引
  private generateIndexedNodes() {
    const queue: Node[] = [...this.data.children];
    let currentIndex = 1;

    // 先处理一级节点，再依次处理每个节点的子节点
    for (const node of queue) {
      node.index = currentIndex++;
      // 把当前节点的子节点加入队列，后续遍历
      if (node.children) {
        queue.push(...node.children);
      }
    }

    this.indexedNodes = this.data.children;
  }

  // 点击列表项触发的方法
  onItemClick(index: number) {
    console.log('当前点击的索引：', index);
    // 这里可以根据需求扩展逻辑，比如把索引传递给父组件、弹出提示等
  }
}

2. 模板中渲染嵌套列表 #

用两层*ngFor渲染二级结构，每个列表项显示索引和名称，同时绑定点击事件。

模板代码（nested-list.component.html） #

<ul>
  <!-- 遍历一级父节点 -->
  <li *ngFor="let parent of indexedNodes">
    <span (click)="onItemClick(parent.index!)">{{ parent.index }}. {{ parent.name }}</span>
    <!-- 遍历子节点（如果存在） -->
    <ul *ngIf="parent.children">
      <li *ngFor="let child of parent.children">
        <span (click)="onItemClick(child.index!)">{{ child.index }}. {{ child.name }}</span>
      </li>
    </ul>
  </li>
</ul>

额外说明 #

• 广度优先的索引顺序：先遍历所有一级节点（New→Active），再依次遍历每个一级节点的子节点（New的两个子项→Active的两个子项），最终索引为：1.New、2.Active、3.Amount Break（New下第一个）、4.Amount Break（New下第二个）、5.Amount Break（Active下第一个）、6.Amount Break（Active下第二个）。
• 代码里用了!非空断言，因为我们在遍历方法里已经确保每个节点都被分配了索引，不会出现空值。
• 点击事件的逻辑可以根据你的实际需求修改，比如把索引通过输出事件传递给父组件，或者做其他业务处理。

内容的提问来源于stack exchange，提问作者Peter Kósa