Ознакомьтесь с нашими Внутренними тренингами по Angular или общедоступными курсами по Angular.
Попробуйте fossilo.com, наш угловой проект для архивации целых веб-сайтов.
Что мы будем делать сегодня:
- установить компонент ng2-dragula с помощью npm в проекте Angular4
- импортировать его в модуль приложения и внедрить в компонент приложения
- отобразить список задач и поиграть с ними
Установите ng2-dragula в свое приложение Angular4
Войдите в свой проект и выполните следующую команду с npm:
npm install ng2-dragula --save
Импорт и реализация компонента ng2-dragula
В своем модуле приложения импортируйте модуль ng2-dragula и добавьте его в импорт NgModule следующим образом:
Затем в компоненте приложения установите параметры компонента ng2-dragula, если они вам нужны.
Это можно сделать двумя способами:
1. Настройте свойство options как любое и установите его с помощью желаемой опции ng2-dragula, например removeOnSpill, revertOnSpill, copy…:
2. Импортируйте dragulaService и вставьте его в конструктор компонента приложения. Затем в конструкторе вызовите службу, чтобы получить метод setOptions. Вам необходимо указать имя и параметры перетаскивания:
Вы можете найти все варианты в официальной документации драгулы.
Отображать
В вашем шаблоне html у вас также есть 2 способа отобразить список перетаскивания:
1. Либо создайте 2 списка, встроенных в 2 разных контейнера. Добавьте директиву [dragula], она позволяет группировать контейнеры вместе и называется «мешок». Также установите свои параметры, привязав к атрибуту [dragulaOptions].
2. Или в контейнере div добавьте параметр [dragula] ( но не [dragulaOptions]) и задайте имя выбранного вами параметра (определенного в компоненте приложения ):
CSS для используемых здесь классов можно найти в файле example.css пакета dragula в репозитории Github. Вы также можете перезаписать CSS, чтобы настроить перетаскивание по своему желанию!
Взгляните на свой перетаскиваемый список, запустив локальный сервер (убедитесь, что вы находитесь в репозитории своего проекта):
ng serve -o
Теперь вы можете перетаскивать все, что хотите, вы даже можете удалять и копировать некоторые элементы!
Спасибо @valorkin и @walkerrunpdx за этот забавный компонент npm!
Увидимся в следующий раз, чтобы увидеть еще одну статью об Angular4! Подпишитесь на меня в Twitter, LinkedIn или Medium и взгляните на нашу серию статей Medium!