在 Angular 中，你将如何在 dom 中移动组件？

Posted 2023-02-22

【中文标题】在 Angular 中，你将如何在 dom 中移动组件？

【英文标题】：In Angular, how would you move a component in the dom?

【发布时间】：2022-01-15 13:00:40

【问题描述】：

开始学习 Angular，所以这可能有一个简单的答案:)

没有具体的代码。我正在寻求帮助，正朝着正确的方向前进。

正在开发一个小型购物清单应用程序。 关键是，当您在杂货店找到东西时，您单击该物品，它会在“页面的已找到物品区域”中向下移动 click and move below image

自动取款机。蓝色组件实际上只是模板中的按钮，但实际上可以是任何东西。 它们是“杂货组件”的实例，嵌套在“购物清单”组件中，使用 ngFor 构建。

在我看来，使用单个数组并对其进行过滤是有意义的。 我已经尝试过了，它有点工作，但是一旦初始化完成，我就无法让它移动。 因此，当我单击杂货组件时，我需要告诉购物清单组件将其向下移动到 dom 的“找到的杂货”部分。如果您想将其向上移动，反之亦然。

任何 hits 或 cmets 都会有所帮助。

【参考方案1】：

CDK 拖放可能对您有用

https://material.angular.io/cdk/drag-drop/overview#cdk-drag-drop-connected-sorting

【讨论】：

嗨，Talha，感谢您的提示，我实际上并不是在寻找拖放功能，我只是想单击该项目并转移位置。但也许这个 CDK Drag Drop 也可以做到这一点 - 我需要研究一下。

【参考方案2】：

你测试过“Dragula”吗？ Here

您不仅可以进行垂直拖放，还可以通过选项更改方向来进行水平拖放：

direction:'horizontal'

【讨论】：

嗨，Juan，感谢您的提示，我实际上并不是在寻找拖放功能，我只是想单击该项目并转移位置。但也许这个 Dragula 也可以做到这一点——我需要调查一下。至少它有很酷的名字：P

是的！这个真的很酷！ :P