Создавайте директивы, чтобы легко расширять ваши компоненты

Директивы Angular — отличный способ добавить дополнительную функциональность компонентам и уменьшить дублирование кода. Следовательно, в этой статье мы рассмотрим небольшой пример, чтобы увидеть, как мы можем использовать директивы.

Директивы похожи на компоненты, но без шаблона. Они добавляют дополнительное поведение к элементам в ваших приложениях Angular. Возможно, вы уже использовали некоторые встроенные директивы, такие как *ngIf и *ngFor. Это так называемые структурные директивы, которые изменяют макет DOM, добавляя и удаляя элементы DOM. Кроме того, существуют директивы атрибутов, которые изменяют внешний вид или поведение элемента, компонента или другой директивы. Вы можете прочитать больше об этом здесь".

Давайте теперь посмотрим, как мы можем определить наши собственные пользовательские директивы. Мы можем создавать новые директивы с помощью Angular CLI:

ng generate directive my-directive

Эта команда создаст пустой класс с аннотацией @Directive:

Чтобы наша директива прослушивала события, например. пользователь нажимает клавишу ESC, мы можем использовать аннотацию HostListener. Это объявляет событие DOM для прослушивания и предоставляет метод обработчика для запуска при возникновении этого события.

Наконец, мы можем использовать директиву, просто добавив селектор к любому html-тегу, например, модальному или боковой панели, которую мы хотим закрыть, когда пользователь нажимает клавишу escape:

<div class="my-modal"
     closeByEscape
     (escapeAction)="onClose()"
>
...
</div>

Мы также можем добавить дополнительные условия, такие как игнорирование ключа alt, shift или ctrl.

Что дальше?

Это был небольшой пример того, как создавать пользовательские директивы в Angular. Используйте это как вдохновение, чтобы написать свои собственные директивы для расширения ваших HTML-шаблонов и повторного использования функциональности.

Подпишитесь на меня в Medium или Twitter, чтобы узнать больше об Angular!

Повышение уровня кодирования

Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:

  • 👏 Хлопайте за историю и подписывайтесь на автора 👉
  • 📰 Смотрите больше контента в публикации Level Up Coding
  • 💰 Бесплатный курс собеседования по программированию ⇒ Просмотреть курс
  • 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"

🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу