Пользовательская директива в Angular - лучшее, что вы не используете
Если вы уже давно работаете в сфере Angular, вы должны быть знакомы с концепцией директив. Директивы - один из основных строительных блоков Angular. Это везде. Даже компоненты в Angular находятся в директивах с шаблоном.
Директивы в основном представляют собой классы машинописного текста с @Directive декораторами. Из документации по Angular видно, что существует три типа директив.
- Компоненты: директивы с шаблоном.
- Структурные директивы: изменяйте макет DOM, добавляя и удаляя элементы DOM.
- Директивы атрибутов: изменяют внешний вид или поведение элемента, компонента или другой директивы.
Некоторые общие директивы, которые должны быть вам знакомы: *ngFor(structural), *ngIf(structural), hidden(attribute), NgStyle(attribute) и т. Д. В этой статье будет рассмотрен последний тип: директивы атрибутов.
Недавно в одном из моих проектов мне потребовалась простая система доступа на основе ролей. В одном из моих модулей действия добавления, редактирования, удаления или обновления были основаны на роли пользователя, которая определяется на уровне администратора и настраивается. Информация о доступе доступна при входе пользователя в систему.
Как бы вы это реализовали?
Первые мысли
Первоначальная мысль заключалась в том, чтобы использовать директивы *ngIf или [hidden] во всех компонентах с настраиваемой логикой внутри контроллера компонента. Это выглядело легко реализовать. Но насколько многоразовым он будет? Что делать, если вы хотите использовать его в нескольких модулях, компонентах? Да, пора ввести директиву!
Создайте настраиваемую угловую директиву
Как я уже говорил выше, директивы - это классы машинописного текста. Вы можете создать файл, присвоить ему удобное имя access-control.directive.ts и создать свой класс вручную. Но для этого мне понадобится Angular CLI.
ng generate directive access-control
Теперь у вас есть самая простая директива, которая пока ничего не делает.
Прежде чем мы перейдем к редактированию директивы, давайте взглянем на наши данные управления доступом, которые мы получили от нашего REST API.
Из приведенных выше данных очевидно, что наша директива должна получить как минимум две части информации от хоста (компонента, в котором используется директива):
- Тип модуля (пользователи или статьи)
- Тип доступа (создание, редактирование, удаление или чтение)
Давайте сделаем шаг назад и вспомним, что компоненты действительно являются директивами, поэтому вы можете передавать данные в директиву так же, как и в компонент. Мы можем использовать декоратор @Input. Нам также необходимо реализовать NgOnInit в нашей директиве, чтобы мы могли проверять элементы управления доступом при инициализации компонента.
Большой! Давайте реализуем нашу логику для условного отображения / скрытия хост-элемента (компонента, на котором размещена наша директива).
Мы импортировали ElementRef из @angular/core, которые мы можем использовать для доступа к элементам DOM и манипулирования ими. Будьте осторожны при использовании ElementRef, поскольку вы напрямую обращаетесь к элементам DOM, которые могут привлекать XSS-атаки. При инициализации компонента мы извлекаем данные о роли, перекрестно проверяем комбинацию нашего модуля и типа доступа и заставляем элемент показывать / скрывать.
Примечание. Я получаю данные доступа из класса AuthService, который является созданной мной службой Angular. Вы можете настроить свой собственный логин, чтобы сделать то же самое.
Давайте теперь посмотрим, как мы можем использовать это в одном из наших компонентов.
Это так просто! Кнопка выше теперь будет отображаться / скрываться в зависимости от элементов управления доступом пользователя. Вы можете использовать нашу директиву accessControl в любых кнопках / компонентах навигации по созданию, редактированию, удалению и чтению. Его можно использовать повторно.
Есть множество других вариантов использования директив. Вы можете выполнять такие действия, как прослушивание событий на хосте и реагирование на них, применение стилей к хосту и многое другое. Надеюсь, с его помощью вы создадите что-то прекрасное.
Больше таких статей 👇
Удачного взлома!
