Создание пользовательской структурной директивы в Angular с использованием декоратора @Directive

В Angular для изменения структуры DOM и поведения компонентов используются директивы. Среди типов директив в Angular, пользовательские структурные директивы создаются с использованием декоратора @Directive.

Для того чтобы создать пользовательскую структурную директиву, необходимо определить класс с декоратором @Directive. В этом классе можно определить конкретное поведение для вашей директивы. Имя директивы в шаблоне определяется с помощью имени, указанного в декораторе @Directive.

Давайте рассмотрим базовый пример создания пользовательской структурной директивы.

import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', 'yellow');
  }
}

В этом примере мы создаем директиву HighlightDirective, которая меняет фон элемента на желтый. Декоратор @Directive определяет CSS-селектор, который Angular ищет в HTML шаблонах для применения директивы.

Стоит учесть, что директивы, в отличие от компонентов, не имеют своих шаблонов и стилей. Их задача - применять поведение к уже существующим элементам.

Итак, ответ на вопрос "Как создать пользовательскую структурную директиву в Angular" - использовать декоратор @Directive.

Создание пользовательской структурной директивы в Angular с использованием декоратора @Directive

Related Questions