Каковы различные виды директив в Angular?

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

1. Компоненты (Components)
2. Структурные директивы (Structural Directives)
3. Атрибутные директивы (Attribute Directives)

Давайте рассмотрим каждую из них подробнее.

1. Компоненты

Компоненты — это специализированные директивы, которые имеют свой собственный шаблон. Они состоят из HTML-кода и логики, написанной на TypeScript. Компоненты являются основными строительными блоками Angular-приложений.

Пример компонента:

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `<h1>Hello, {{ name }}!</h1>`
})
export class ExampleComponent {
  name: string;

  constructor() {
    this.name = 'World';
  }
}

В этом примере мы определяем компонент ExampleComponent, который выводит приветствие с названием.

2. Структурные директивы

Структурные директивы изменяют структуру DOM, добавляя или удаляя элементы. Они обычно используются с символом *, что обозначает их использование.

Пример структурной директивы *ngIf:

<div *ngIf="isVisible">Этот текст виден только при isVisible = true</div>

Если переменная isVisible равна true, то этот элемент будет отображаться. В противном случае он будет удален из DOM.

Другой пример — *ngFor, который используется для перебора списков:

<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

Этот код создаст элемент списка <li> для каждого элемента в массиве items.

3. Атрибутные директивы

Атрибутные директивы изменяют внешний вид или поведение элемента, к которому они применяются, не меняя его структуры. Они могут добавлять стили, изменять классы или добавлять события.

Пример атрибутной директивы для изменения цвета текста:

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

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

Использование этой директивы в HTML:

<p appHighlight>Этот текст будет выделен желтым цветом</p>

Заключение

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