Что такое директивы в Angular?

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

Типы директив

В Angular существует три основных типа директив:

1. Компоненты: Это директивы, которые имеют свой шаблон. Компоненты являются основными строительными блоками приложения на Angular.
2. Структурные директивы: Они изменяют структуру DOM, добавляя или удаляя элементы на основе условий. Примеры включают *ngIf, *ngFor, и *ngSwitch.
3. Атрибутные директивы: Они меняют внешний вид или поведение существующего элемента. К ним можно отнести такие директивы, как ngClass и ngStyle.

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

Рассмотрим, как создать пользовательскую атрибутную директиву, которая изменяет цвет текста элемента.

Шаг 1: Генерация директивы

Для начала сгенерируем директиву с помощью Angular CLI. Откройте терминал и выполните команду:

ng generate directive changeColor

Шаг 2: Реализация директивы

После создания директивы в файле change-color.directive.ts реализуйте логику для изменения цвета текста:

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

@Directive({
  selector: '[appChangeColor]'
})
export class ChangeColorDirective {
  
  constructor(private el: ElementRef, private renderer: Renderer2) { }

  @HostListener('mouseenter') onMouseEnter() {
    this.changeColor('blue');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.changeColor('black');
  }

  private changeColor(color: string) {
    this.renderer.setStyle(this.el.nativeElement, 'color', color);
  }
}

В этом коде:

• Мы имплементируем ElementRef для доступа к элементу, на который применяется директива.
• Используем Renderer2 для изменения стиля элемента, что является более безопасным методом, предотвращающим возможные проблемы с XSS (межсайтовым скриптингом).
• Добавляем два слушателя событий: на наведение (mouseenter) и выход мыши (mouseleave), который меняет цвет текста.

Шаг 3: Применение директивы в компоненте

Теперь давайте использовать нашу директиву в шаблоне компонента. Откройте файл вашего компонента (например, app.component.html) и добавьте следующий код:

<h1 appChangeColor>Hover over this text to change its color!</h1>

Заключение

Теперь, когда вы наведете указатель мыши на заголовок, текст изменит свой цвет. Директивы являются мощным инструментом в Angular, позволяя создавать настраиваемые и повторно используемые элементы интерфейса. Практикуйтесь с созданием своих собственных директив, чтобы лучше понять, как они могут улучшить ваше приложение!