Пользовательские структурные директивы в Angular

Что такое структурные директивы?

Структурные директивы в Angular отвечают за манипулирование элементами, их изменение и удаление внутри шаблона компонента. Структурная директива применяется к основному элементу, который изменяется и обновляется вместе со своими дочерними элементами сообразно с поведением структурной директивы. В Angular имеется несколько встроенных структурных директив, таких как ngFor, ngSwitch и ngIf. Мы с вами научимся создавать пользовательские структурные директивы. Надеюсь, что вы уже знакомы с поведением указанных выше директив.

Angular  —  это платформа для создания мобильных и настольных веб-приложений. Присоединяйтесь к сообществу миллионов разработчиков…

Создание пользовательских структурных директив

Поговорим теперь о создании пользовательской директивы в приложении на Angular. Рассмотрим базовую реализацию структурной директивы.

Сценарий варианта использования: структурная директива применяется к контейнеру (например, div). Передадим в эту директиву некоторое значение задержки. Содержимое контейнера будет отображаться только по истечении времени задержки, поэтому придётся отложить просмотр контейнера до истечения времени задержки. Обратимся теперь к коду, который для всего этого потребуется.

Посмотрите, как создаётся пользовательская структурная директива:

1. Для определения пользовательской директивы используем декоратор Directive.
2. Затем берём селектор, который представляет эту директиву.
3. В процессе создания конструктор получает два параметра.

• 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. Вот как выполняется проект:

Надеюсь, статья была вам полезной!

Читайте также:

• Эффективное или частное хранение данных с помощью JavaScript WeakMaps
• Множества ES6 в JavaScript. Зачем?
• Почему нельзя прерывать цикл forEach в JavaScript

Читайте нас в Telegram, VK и Яндекс.Дзен

---

Перевод статьи Mayank Gupta: Custom Structural Directives in Angular