Источник: Nuances of Programming
Что такое структурные директивы?
Структурные директивы в Angular отвечают за манипулирование элементами, их изменение и удаление внутри шаблона компонента. Структурная директива применяется к основному элементу, который изменяется и обновляется вместе со своими дочерними элементами сообразно с поведением структурной директивы. В Angular имеется несколько встроенных структурных директив, таких как ngFor, ngSwitch и ngIf. Мы с вами научимся создавать пользовательские структурные директивы. Надеюсь, что вы уже знакомы с поведением указанных выше директив.
Angular — это платформа для создания мобильных и настольных веб-приложений. Присоединяйтесь к сообществу миллионов разработчиков…
Создание пользовательских структурных директив
Поговорим теперь о создании пользовательской директивы в приложении на Angular. Рассмотрим базовую реализацию структурной директивы.
Сценарий варианта использования: структурная директива применяется к контейнеру (например, div). Передадим в эту директиву некоторое значение задержки. Содержимое контейнера будет отображаться только по истечении времени задержки, поэтому придётся отложить просмотр контейнера до истечения времени задержки. Обратимся теперь к коду, который для всего этого потребуется.
Посмотрите, как создаётся пользовательская структурная директива:
- Для определения пользовательской директивы используем декоратор Directive.
- Затем берём селектор, который представляет эту директиву.
- В процессе создания конструктор получает два параметра.
- ViewContainerRef: ссылается на контейнер, к которому применяется директива.
Создание структурной директивы без поведения
Этот код создаёт структурную директиву, причём в качестве ссылки он принимает TemplateRef и ViewContainerRef. Директива может применяться к компоненту следующим образом: значение, передаваемое в директиву, задаётся как свойство @Input этой директивы.
Применение директивы к элементу
<div *delayRendering="1000">
<h1>This is the Template area</h1>
</div>
Можно использовать созданную выше директиву следующим образом: в директиву передаётся значение 1000, что сделает параметр Input delayRendering равным 1000. В приведённом выше сценарии на элемент div, к которому применяется эта директива delayRendering, ссылаются через viewContainerRef.
На содержимое контейнера <h1>This is the Template area</h1> ссылается templateRef. Используя эти ссылки (viewContainerRef и templateRef), мы можем определить поведение компонента.
Теперь нужно обновить код, чтобы включить задержку в 1000 миллисекунд при отображении шаблона директивы. В нашем случае необходимо, чтобы тег h1 отображался по истечении указанного значения задержки.
Завершение кода директивы
Теперь внутри функции ngOnInit мы помещаем setTimeoutи по истечении заданного времени встраиваем шаблон в указанный нами контейнер.
- Контейнер указывает на элемент, к которому применяется директива.
- Шаблон — это фактически элемент h1, находящийся внутри контейнера.
Это одна из простых реализаций структурной директивы в Angular. Вот как выполняется проект:
Надеюсь, статья была вам полезной!
Читайте также:
Перевод статьи Mayank Gupta: Custom Structural Directives in Angular
