Привет, ребята, 😁 ранее мы рассмотрели некоторые фундаментальные директивы Angular, о которых вам следует знать. В этом посте мы обсудим пользовательские директивы. Точнее, мы напишем собственную директиву. Есть две разные категории пользовательских директив, которые мы можем создать. Да, вы правильно поняли ✌, мы создадим собственную структурную директиву и директиву атрибутов.
Создайте собственную структурную директиву.
Как мы обсуждали ранее, директивы атрибутов отвечают за изменение внешнего вида и поведения элементов DOM. Их можно использовать для изменения стиля элементов DOM. Существуют разные способы создания класса директив.
1. Вы можете использовать Angular CLI для создания директивного класса
2. Вы можете создать класс с декоратором Directive.
Я буду использовать для этого Angular CLI, потому что это проще. Это автоматически включит нашу директиву в файл app.module.ts. Вы можете сгенерировать директиву, используя следующую команду
Ng g -d изменить цвет
Итак, что на самом деле делает наша директива атрибутов? В этом примере мы создадим простой элемент заголовка и изменим его цвет при наведении курсора мыши. Да… Я знаю, что вы думаете, мы можем легко сделать это без директив, но для простоты мы будем использовать этот пример. Ну, мы могли бы также добавить рамку к нашему заголовку 😉. Прежде чем перейти к реализации, есть 2 декоратора, мы должны с ними познакомиться. Это @HostListener()и @HostBinding().
Привязка хоста
Декоратор функции @HostBinding() в Angular позволяет вам устанавливать атрибуты основного элемента из класса директив.
Предположим, вы хотите изменить какие-либо внутренние характеристики основного элемента в классе директивы, такие как цвет, поля, границы и т. д. В этом случае вам потребуется получить доступ к этим атрибутам основного элемента с помощью декоратора @HostBinding(). и предоставьте им значение в директивном классе.
Имя свойства элемента хоста, значение которого мы хотим установить в директиве, является единственным параметром, принимаемым декоратором @HostBinding().
Прослушиватель хоста
Вы можете управлять событиями элемента host в классе директив в Angular, используя декоратор функции @HostListener().
Выполните следующее требование: вы хотите отображать окно предупреждения при нажатии на элемент хоста. Для этого вы должны реагировать на события, инициированные элементом хоста в классе директив. Это достигается в Angular с помощью @HostListener(). Хорошо, давайте перейдем к фактической реализации.
Здесь вы можете видеть, что декоратор HostBinding связывает нашу директиву изменения цвета со свойством style.color. Где он изменяется динамически в зависимости от значения, предоставленного переменной цвета. HostListener будет прослушивать события mouseover и mouseleave и запускать методы методов onMouseOver onMouseLeave, которые изменят наше свойство цвета. Итак, окончательный результат будет таким.
Создайте собственную структурную директиву.
Итак, что такое структурные директивы, освежу вашу память, это директивы, которые изменяют структуру DOM. Если вы хотите узнать об этом больше, вы можете обратиться к моей предыдущей статье. Обычно мы используем символ *, когда передаем структурные директивы нашим элементам. Но знаете ли вы, что под капотом эта директива применяется к ng-шаблону? Покажу на примере.
‹div *ngIf="условие"›
…
‹/дел›
Но под капотом
‹ng-template [ngIf]=”условие”›
‹див›
…
‹/дел›
‹/ng-шаблон ›
Вы можете видеть, что * — это всего лишь синтаксический сахар, используемый для того, чтобы скрыть основные сложности и сделать код более чистым и элегантным. Итак, для нашей пользовательской директивы мы также можем использовать оба этих подхода. В этом примере я собираюсь создать структурный атрибут, очень похожий на *ngIf. Эта директива appHideElement скроет хост-элемент на 5 секунд и снова сделает его видимым. Сначала будет легко сгенерировать директиву, как и раньше. А затем добавить нашу логику. Сгенерированный файл будет таким же, как директивы атрибутов, но здесь мы будем использовать другую терминологию. Давайте сначала пройдемся по коду и поймем, что происходит.
Как видите, это очень похоже на структурную директиву, но здесь мы не использовали @HostListener() и @HostBinding(). Вместо этого у нас есть TemplateRef и ViewContainerRef в нашей структурной директиве для изменения макета DOM. Подробнее о TemplateRef ViewContainerRef мы поговорим в отдельной статье, а здесь я дам вам краткое представление об этом.
Контейнеры представлений — это места, где представления могут динамически добавляться, удаляться или создаваться. Контейнер представления может включать:
· основные представления создаются с помощью функции createComponent для создания экземпляра компонента.
· При создании экземпляра TemplateRef функция createEmbeddedView используется для создания встроенных представлений.
TemplateRef представляет встроенный шаблон, который можно использовать для создания экземпляров встроенных представлений.
Чтобы использовать эти классы, мы внедрили их в наш конструктор с помощью внедрения зависимостей (DI). Мы использовали метод setTimeOut с 5-секундной задержкой. И внутри него, чтобы добавить элемент хоста в макет DOM, мы вызываем createEmbeddedView() метод ViewContainerRef. А для очистки содержимого мы используем метод clear() класса ViewContainerRef.
Вы также можете видеть, что мы передаем ввод в нашу директиву с именем appHideElement, которая является логическим значением. Основываясь на этом значении, мы скрываем наши элементы на 5 секунд и всегда отображаем или прячем. Если вы передадите true, он будет скрыт на 5 секунд и отобразится снова, иначе, если false, он ничего не отобразит. Здесь вы должны заметить, что я использовал то же имя селектора, что и наш ввод. Если вы хотите, чтобы в классе директив использовалось другое имя, вы можете передать псевдоним. Тем не менее, мне нравится, как это просто. Итак, наш окончательный результат будет таким. Через 5 секунд после рендеринга компонента приложения мы можем увидеть текст.
Итак, ребята, поздравляю, вы создали свои собственные атрибуты и структурные директивы. Я знаю, что это может быть немного сложно, если вы новичок. Но я призываю вас просмотреть мой другой пост о директивах или любых других материалах, чтобы лучше понять эти темы. Есть некоторые темы расширенных пользовательских директив, которые я не затронул в этом посте, возможно, я расскажу о них в следующем посте. Но это даст вам хороший обзор пользовательских директив. Я также добавлю ссылку на stackblitz, где вы можете получить весь код. Не стесняйтесь играть и учиться на практике. Итак, до новых встреч, счастливого кодирования. 😁✌
