Вступление

Всем привет, в этой статье мы создадим директиву Drag and drop с angular из проекта angular-cli с нуля.

Прежде всего, нам нужно установить angular-cli на наш компьютер, для этого нам нужно установить node.js, последняя версия - 12.13.0, и это та, которую я буду использовать в этом руководстве.

После того, как мы установили узел на наш компьютер, загрузив дистрибутив для нашей ОС, мы сможем использовать npm, решение диспетчера пакетов узлов, и мы сможем установить angular-cli с помощью этой простой команды (может потребоваться sudo) :

npm install angular-cli -g

После установки мы сможем создать наш новый проект с помощью angular cli с помощью команды

ng new dnd

Это сгенерирует нашу первоначальную структуру, конфигурацию и загрузит все модули узлов, необходимые для работы angular 8 (в моем случае Angular 8).

Как только мы это сделаем, мы запустим наш сервер с помощью angular-cli, выполнив в корневом пути проекта следующую команду:

ng serve

Как только код будет обнаружен и все будет установлено, мы можем перейти в наш браузер на localhost: 4200 и увидеть что-то вроде этого.

Для простоты мы начнем создавать зону перетаскивания в компоненте приложения.

В файле app.component.html мы создадим следующую структуру HTML, которая будет определять нашу зону перетаскивания:

А также мы собираемся задать стиль этой структуре, добавив это в файл app.component.css:

С помощью этих двух шагов мы получим что-то вроде этого:

Директивы и как их использовать:

После того, как мы продолжим, мы должны немного поговорить о директивах. В angular 8 есть 3 разных типа директив. Наиболее часто используемые (и мы уже использовали одну из них) являются компоненты. Такие директивы определяют поведение каждой части нашего приложения. Вторые - это структурные директивы, они вносят изменения в dom приложения в отношении некоторых условий или выражений, объявленных в них. (Как директивы ngFor или ngIf). Третьи - это директивы атрибутов, они вносят изменения в элемент, к которому они прикреплены, например, изменения стиля, классов, атрибутов и т. Д. (Например, директивы ngClass или стиля).

Чтобы создать директиву, мы должны быть помещены в папку, которую мы собираемся создать, и использовать следующую команду angular-cli:

ng generate directive dnd

Выполнив это, angular-cli создаст 2 файла в нашем фактическом каталоге:

  • dnd.directive.ts (главный файл с поведением нашей директивы)
  • dnd.directive.specs.ts (тестовый файл кармы для модульного тестирования) В файле dnd.directive.ts мы найдем декоратор, как в файле компонентов, но немного отличающийся от него, это декоратор директив, который присоединяет метаданные к нашему новому классу. чтобы позволить ему вести себя как простая директива.

Как мы видим, теперь селектор (он похож на стандартный селектор CSS) является селектором атрибутов, поэтому для использования этой директивы мы собираемся объявить новый атрибут в теге хоста, в нашем случае это div с классом dropzone.

Следующим шагом является добавление HostListener для обнаружения, наконец, перетаскивания, перетаскивания и удаления файла.

Затем нам нужно уведомить пользователя о том, что вы попадаете в dropzone,
мы добавим небольшую анимацию встряхивания, чтобы привлечь внимание пользователя.

для этого мы должны также привязать свойства хоста к директиве, мы можем сделать это с помощью декоратора @HostBinding и украсить свойство в классе директивы.

Не забудьте импортировать HostBinding из @ angular / core

Добавление файла поверх стиля класса:

Затем нам нужно запустить класс встряхивания в DragOver в @HostListener, чтобы получить шаткую зону.

Теперь вы можете испускать отброшенные файлы, чтобы использовать их вне директивы:

Баунс: пример загрузки симулятора.

В большинстве сценариев вы хотите загрузить свои перетащенные файлы в просматриваемые файлы, которые мы также поддерживаем.

Начнем с того, что последнее, что мы сделали с нашей директивой, - это добавили пропущенный эмиттер в наше представление, давайте дадим ему ссылку в нашем ts-файле.

перечисление наших перетаскиваемых файлов в представлении:

Вы получите что-то вроде изображения ниже, список с именем и размером файла с индикатором выполнения и возможностью удаления элемента из списка.

Наконец, я добавил симулятор прогресса к ощущению, что идет загрузка.

Резюме

Вы можете найти полный проект на GitHub, живую версию на StackBlitz.

Вы узнали что-то новое? Если да, пожалуйста:

→ хлопните кнопку несколько раз ниже, чтобы это увидело больше людей

У вас есть вопросы?

Пожалуйста, оставляйте свои комментарии и вопросы в Medium или свяжитесь со мной в Linkedin. Я всегда рад услышать ваши предложения или улучшения. 👨‍💻