В Angular, как бы вы переместили компонент в dom?

#javascript #html #angular #typescript

#javascript #HTML #angular #typescript

Вопрос:

Начал изучать Angular, так что на этот вопрос может быть простой ответ 🙂

Не переходя к конкретному коду. Я ищу помощи, двигаясь в правильном направлении.

Работаю над небольшим приложением shoppinglist. Дело в том, что когда вы нашли что-то в продуктовом магазине, вы нажимаете на элемент, и он перемещается вниз в область «найденные элементы страницы», нажмите и переместите изображение ниже

atm. синие компоненты на самом деле являются просто кнопками в шаблоне, но на самом деле могут быть чем угодно. Это экземпляры «продуктового компонента», которые вложены в компонент «список покупок», созданный с помощью ngFor.

На мой взгляд, имело бы смысл работать с одним массивом и фильтровать его. Я пробовал это, и это вроде как работает, но я не могу заставить его двигаться после завершения инициализации. итак, каким-то образом, когда я нажимаю на продуктовый компонент, мне нужно сообщить компоненту списка покупок переместить его вниз в «найденную бакалею» часть dom. или наоборот, если вы хотите переместить его обратно.

Любые обращения или комментарии были бы полезны.

Ответ №1:

В вашем случае может быть полезно перетаскивание CDK

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

1. Привет, Талха, спасибо за подсказку, я на самом деле не ищу функциональность перетаскивания, я просто хочу щелкнуть по элементу, и он переместится. Но, возможно, это перетаскивание CDK также может это сделать — мне нужно будет изучить это.

Ответ №2:

Вы тестировали «Dragula»? Здесь

Вы можете выполнять не только вертикальное перетаскивание, но и горизонтальное, если вы измените направление с помощью опции:

 direction:'horizontal'

1. Привет, Хуан, спасибо за подсказку, я на самом деле не ищу функциональность перетаскивания, я просто хочу щелкнуть по элементу, и он переместится. Но, может быть, эта Dragula тоже может это сделать — мне нужно будет изучить это. По крайней мере, у него классное имя: P

2. Да! Это действительно круто! : P