Angular中ng-zorro组件的树节点拖拽排序

在Angular中使用ng-zorro组件实现树节点的拖拽排序功能，你可以使用nz-tree组件配合draggable指令和相关的事件处理函数。以下是一个简化的例子：

1. 安装ng-zorro-antd：

npm install ng-zorro-antd

2. 在你的Angular模块中导入NgZorroAntdModule：

import { NgZorroAntdModule } from 'ng-zorro-antd';
 
@NgModule({
  imports: [
    // ...
    NgZorroAntdModule
  ],
  // ...
})
export class AppModule { }

3. 在你的组件模板中使用nz-tree和draggable：

<nz-tree
  [nzData]="nodes"
  nzDraggable
  (nzDrop)="dropNode($event)"
  (nzDragEnd)="dragEnd($event)">
</nz-tree>

4. 在你的组件类中实现拖拽事件处理函数：

import { CdkDragDrop } from '@angular/cdk/drag-drop';
 
// ...
 
nodes = [
  { title: '0-0', key: '0-0', children: [{ title: '0-0-0', key: '0-0-0' }] },
  // ...
];
 
dropNode(event: CdkDragDrop<string[]>) {
  moveItemInArray(this.nodes, event.previousIndex, event.currentIndex);
}
 
dragEnd(event: CdkDragEnd) {
  // 可以在这里处理拖拽结束后的逻辑
}

确保你已经导入了必要的moveItemInArray函数：

import { moveItemInArray } from '@angular/cdk/drag-drop';

这个例子提供了一个树节点的拖拽排序功能的基本框架。你可以根据实际需求进一步完善逻辑，比如添加节点状态的维护、处理节点权限等。