Angular 2：求兼具双列表与排序功能的npm组件

你提到的这个需求确实很普遍——既要双列表的选择交互能力，又得支持列表内的排序功能。结合你的情况，我整理了几个实用的方案：

一、直接使用现成的一体化组件 #

目前npm生态里已经有不少同时支持双列表和排序的Angular组件，比如：

• ngx-dual-listbox：这款组件在基础双列表选择功能之外，支持对左右两个列表的项进行拖拽排序，还能配置表头点击触发字段排序，完全覆盖你的需求。
• angular-dual-listbox-sortable：这是社区基于你提到的angular-dual-listbox做的扩展分支，专门新增了排序功能，用法和原版几乎一致，上手成本很低。

二、改造现有组件实现功能 #

如果不想替换已熟悉的组件，也可以基于angular-dual-listbox扩展排序能力：

1. 手动排序数据源：组件的数据源是可绑定的数组，你可以在页面上添加排序按钮，点击时对数据源数组执行升序/降序处理（比如用Array.sort()方法），组件会自动同步更新视图。
2. 结合ngx-sortable增强交互：通过自定义模板替换angular-dual-listbox默认的列表项渲染，给每个列表项加上ngx-sortable指令，实现拖拽排序的效果。不过这需要你参考组件的自定义模板文档来调整配置。

三、基于Angular CDK自行封装 #

如果需要高度定制的交互，推荐用Angular CDK的DragDrop模块自己封装双列表组件：

• 创建两个cdkDropList分别作为左右列表，通过connectedTo属性关联，实现跨列表的拖拽选择。
• 每个cdkDropList默认就支持拖拽排序，同时你可以轻松添加自定义排序按钮，通过操作数据源实现手动排序（比如按名称、ID等字段排序）。
  这种方式的优势是完全可控，能精准匹配你的业务需求，而且Angular CDK的稳定性和兼容性都很可靠。

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