Angular+NgRx/store动态嵌套列表递归实现问题求助

我盯着这个嵌套列表的问题琢磨了下，确实是递归处理节点的逻辑卡壳了——现在的实现只能支持到第二层树形结构，没法往下继续嵌套扩展。核心问题出在两个地方：一是点击节点时没有传递该节点在整个树形结构里的完整路径，导致reducer找不到深层节点；二是reducer里的更新逻辑没有真正递归遍历所有层级，只能修改第一层子节点。

具体修复步骤 #

1. 给递归组件添加路径追踪 #

首先要让每个节点知道自己在整个树形结构中的位置（用索引数组表示路径，比如根节点的第一个子节点路径是[0]，它的第一个子节点路径是[0, 0]），这样点击时能把路径传给store。

修改递归组件的模板和逻辑：

<!-- 递归节点组件模板 -->
<div *ngFor="let node of nodes; let i = index">
  <span (click)="handleNodeClick([...currentPath, i])">{{ node.name }}</span>
  <!-- 递归渲染子节点，传递当前路径 -->
  <div *ngIf="node.children.length > 0">
    <app-recursive-node 
      [nodes]="node.children" 
      [currentPath]="[...currentPath, i]">
    </app-recursive-node>
  </div>
</div>

// 递归节点组件逻辑
import { Component, Input } from '@angular/core';
import { Store } from '@ngrx/store';
import { addChildNode } from '../store/actions';

@Component({
  selector: 'app-recursive-node',
  templateUrl: './recursive-node.component.html'
})
export class RecursiveNodeComponent {
  @Input() nodes!: { name: string; children: any[] }[];
  @Input() currentPath: number[] = [];

  constructor(private store: Store) {}

  handleNodeClick(path: number[]) {
    this.store.dispatch(addChildNode({ path }));
  }
}

2. 修复Reducer中的递归更新逻辑 #

接下来要在reducer里写一个真正的递归函数，根据传入的路径找到目标节点，然后给它添加子节点。

// store/reducer.ts
import { createReducer, on } from '@ngrx/store';
import { addChildNode } from './actions';

export interface Node {
  name: string;
  children: Node[];
}

export interface AppState {
  nodes: Node[];
}

const initialState: AppState = {
  nodes: [{ name: 'asd', children: [{ name: 'qwe', children: [] }] }]
};

// 递归更新节点的工具函数
function updateNodeByPath(nodes: Node[], path: number[]): Node[] {
  // 路径为空，给当前节点数组添加新子节点
  if (path.length === 0) {
    return [...nodes, { name: 'qwe', children: [] }];
  }

  const [currentIndex, ...remainingPath] = path;
  return nodes.map((node, index) => {
    if (index === currentIndex) {
      // 递归处理子节点，如果没有children就初始化
      const updatedChildren = node.children 
        ? updateNodeByPath(node.children, remainingPath) 
        : [{ name: 'qwe', children: [] }];
      return { ...node, children: updatedChildren };
    }
    return node;
  });
}

const _appReducer = createReducer(
  initialState,
  on(addChildNode, (state, { path }) => ({
    ...state,
    nodes: updateNodeByPath(state.nodes, path)
  }))
);

export function appReducer(state: AppState | undefined, action: any) {
  return _appReducer(state, action);
}

3. 验证扩展逻辑 #

现在测试一下：

• 初始结构显示 asd qwe
• 点击asd，它的子节点会新增一个qwe，变成 asd qwe qwe
• 点击第一个qwe，它的子节点会新增一个qwe，变成 asd qwe qwe qwe
• 不管点哪一层的节点，都能在对应层级下新增子节点，支持无限嵌套

关键思路总结 #

核心就是通过路径数组精准定位树形结构中的任意节点，再配合递归更新函数深入到目标层级修改数据，这样就能突破原来的两层限制，实现无限层级的动态嵌套扩展了。

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