如何在angular中创建具有不同视图的树状结构

// 定义树节点的数据模型
interface TreeNode {
  id: number;
  parentId: number;
  name: string;
  // 其他属性...
}

// 创建树组件
@Component({
  selector: 'app-tree',
  template: `
    <ul>
      <li *ngFor="let node of nodes">
        {{ node.name }}
        <app-tree [nodes]="getChildNodes(node.id)"></app-tree>
      </li>
    </ul>
  `
})
export class TreeComponent {
  @Input() nodes: TreeNode[];

  getChildNodes(parentId: number): TreeNode[] {
    // 根据父节点ID获取子节点
    return this.nodes.filter(node => node.parentId === parentId);
  }
}

// 在父组件中使用树组件
@Component({
  selector: 'app-tree-view',
  template: `
    <app-tree [nodes]="rootNodes"></app-tree>
  `
})
export class TreeViewComponent {
  rootNodes: TreeNode[] = [
    { id: 1, parentId: null, name: 'Node 1' },
    { id: 2, parentId: null, name: 'Node 2' },
    // 其他节点...
  ];
}