Пользовательские структурные директивы в Angular
Что такое структурные директивы?
Структурные директивы в Angular отвечают за манипулирование элементами, их изменение и удаление внутри шаблона компонента. Структурная директива применяется к основному элементу, который изменяется и обновляется вместе со своими дочерними элементами сообразно с поведением структурной директивы. В Angular имеется несколько встроенных структурных директив, таких как ngFor, ngSwitch и ngIf. Мы с вами научимся создавать пользовательские структурные директивы. Надеюсь, что вы уже знакомы с поведением указанных выше директив.
Angular — это платформа для создания мобильных и настольных веб-приложений. Присоединяйтесь к сообществу миллионов разработчиков…
Создание пользовательских структурных директив
Поговорим теперь о создании пользовательской директивы в приложении на Angular. Рассмотрим базовую реализацию структурной директивы.
Сценарий варианта использования: структурная директива применяется к контейнеру (например, div). Передадим в эту директиву некоторое значение задержки. Содержимое контейнера будет отображаться только по истечении времени задержки, поэтому придётся отложить просмотр контейнера до истечения времени задержки. Обратимся теперь к коду, который для всего этого потребуется.
Посмотрите, как создаётся пользовательская структурная директива:
- Для определения пользовательской директивы используем декоратор
Directive. - Затем берём селектор, который представляет эту директиву.
- В процессе создания конструктор получает два параметра.
TemplateRef: ссылка на содержимое контейнера.ViewContainerRef: ссылается на контейнер, к которому применяется директива.
Создание структурной директивы без поведения
@Directive({
selector: '[delayRendering]'
})
export class DelayRenderingDirective {
constructor(
private template: TemplateRef<any>,
private container: ViewContainerRef
) { }
@Input()
set delayRendering(delayTime: number): void { }
}Этот код создаёт структурную директиву, причём в качестве ссылки он принимает 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 отображался по истечении указанного значения задержки.
Завершение кода директивы
@Directive({
selector: '[delayRendering]'
})
export class DelayRenderingDirective {
constructor(
private template: TemplateRef<any>,
private container: ViewContainerRef
) { }
@Input()
set delayRendering(delayTime: number): void { }
ngOnInit() {
setTimeout(() => {
this.container.createEmbeddedView(this.template);
}, this.delayRendering);
}
}Теперь внутри функции ngOnInit мы помещаем setTimeoutи по истечении заданного времени встраиваем шаблон в указанный нами контейнер.
- Контейнер указывает на элемент, к которому применяется директива.
- Шаблон — это фактически элемент
h1, находящийся внутри контейнера.
Это одна из простых реализаций структурной директивы в Angular. Вот как выполняется проект:
Надеюсь, статья была вам полезной!
Comments