Легкая альтернатива jquery ui, выбираемая в угловом проекте

Question

Выбираемый виджет jQuery UI - мощный инструмент.

https://jqueryui.com/selectable/

Тем не менее, добавление этого виджета в угловой проект, я полагаю, будет осуждено как "угловой путь". Тем не менее, я попытался широко искать альтернативный плагин, обеспечивающий ту же функциональность, что и выбираемый виджет, как в jquery, так и в угловых экосистемах, и я не могу найти ни одного. Например, известный проект Angular UI не имеет такой функции.

Я что-то пропустил? Существует ли чистый способ javascript / css имитировать выбираемый виджет jQuery UI, который работает в разных браузерах, или это еще один случай, когда лучший способ получить функциональность - игнорировать "угловой путь" и включать виджет jQuery UI?

Answer 1

У меня была похожая проблема, и я решил эту проблему с помощью selectable.js. Он по-прежнему не на 100% угловой, но у него гораздо меньше накладных расходов, чем у jquery и jquery-ui.

Пример интеграции Angular с Selectable.js

Несколько вещей могут потребовать объяснения:

1. Установите selectable.js, используя, например, npm
2. Включите selectable.js, используя import Selectable from 'selectable.js';, Это работает по крайней мере с веб-упаковщиком и, следовательно, должно работать с проектами, созданными с угловым
3. Важно использовать элемент конфигурации appendTo из selectable. Для этого нужна ссылка на div. В Angular это должно быть сделано с @ViewChild и требует, чтобы div получал тег, в этом случае #container. Для получения дополнительной информации см. /questions/7682909/uglovoj-2-dostup-k-elementu-iz-komponenta-getdocumentbyid-ne-rabotaet/7682926#7682926
4. Ссылка на тег контейнера доступна только после того, как Angular завершил инициализацию вида, поэтому нам нужно использовать AfterViewInit