Як створювати власні директиви в Angular

Автор

Директиви Angular: Ключовий Інструмент для Розробки Інтерактивних Інтерфейсів

Однією з визначальних особливостей Angular є директиви. Директиви в Angular є механізмом для впровадження динамічної поведінки у DOM-елементи. Angular пропонує широкий спектр вбудованих директив, але також дозволяє розробникам створювати власні, унікальні директиви, що розширюють функціонал цього фреймворку.

Що таке Директиви?

Директиви – це спеціальні інструкції, які Angular використовує для модифікації взаємодії або візуального відображення HTML-елементів. За допомогою директив можна підключати обробники подій, змінювати структуру DOM або керувати відображенням та приховуванням елементів.

В Angular розрізняють два типи вбудованих директив: структурні та атрибутивні. Структурні директиви відповідають за зміни в структурі DOM, в той час, як атрибутивні директиви змінюють зовнішній вигляд або поведінку елементів. Використання директив є ефективним методом розширення можливостей компонентів Angular.

Переваги Використання Директив

Використання директив в Angular надає такі переваги:

  • Повторне Використання: Директиви можуть бути використані в різних компонентах, що заощаджує час та зусилля розробника.
  • Розширюваність: Функціонал директив можна розширити, додаючи нові можливості, що робить компоненти більш потужними.
  • Гнучкість: За допомогою директив можна різними способами змінювати поведінку або зовнішній вигляд елементів, забезпечуючи гнучкість при розробці додатків.

Налаштування Проекту Angular

Для налаштування проекту Angular, необхідно спочатку встановити Angular CLI, запустивши наступну команду в терміналі:

 npm install -g @angular/cli

Після завершення встановлення Angular CLI, створимо новий проект, виконавши команду:

 ng new custom-directives-app

Ця команда створить новий проект Angular під назвою “custom-directives-app”.

Створення Власної Директиви

Тепер, коли проект Angular налаштовано, можна розпочинати створення власних директив. Для цього, створіть файл TypeScript і оголосіть клас, позначений декоратором @Directive.

Декоратор @Directive є інструментом TypeScript, який використовується для створення кастомних директив. Створимо новий файл highlight.directive.ts в каталозі src/app. У цьому файлі ми створимо директиву підсвічування.

Приклад коду:

 import { Directive } from "@angular/core";
@Directive({
    selector: "[myHighlight]",
})
export class HighlightDirective {
    constructor() {}
}

Код імпортує декоратор Directive з модуля @angular/core. Декоратор @Directive застосовується до класу HighlightDirective. Він приймає об’єкт з властивістю selector як аргумент.

У цьому прикладі, селектор встановлено як [myHighlight], що дозволяє застосовувати цю директиву, додаючи атрибут myHighlight до елемента шаблону.

Ось приклад використання директиви в шаблоні:

 <main>
<p myHighlight>Текст для підсвічування</p>
</main>

Додавання Функціональності до Директиви

Після створення директиви, необхідно додати до неї функціонал для маніпуляцій з DOM. Для цього буде потрібен ElementRef з @angular/core.

ElementRef буде вставлено в конструктор директиви. ElementRef є обгорткою навколо рідного елемента DOM.

Приклад додавання функціональності до директиви:

 import { Directive, ElementRef } from "@angular/core";
@Directive({
    selector: "[myHighlight]"
})
export class HighlightDirective {
    constructor(private element: ElementRef) {
        this.element.nativeElement.style.backgroundColor="lightblue";
    }
}

У цьому прикладі конструктор класу HighlightDirective приймає параметр ElementRef, який Angular автоматично передає. ElementRef забезпечує доступ до базового DOM елемента.

За допомогою this.element.nativeElement ми отримуємо доступ до рідного DOM-елемента параметра element, після чого встановлюємо світло-блакитний колір фону. Це означає, що елемент, до якого застосовано директиву myHighlight, буде мати світло-блакитний фон.

Для того, щоб директива працювала, її потрібно імпортувати та оголосити у файлі app.module.ts.

Приклад:

 import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HighlightDirective } from './highlight.directive';

@NgModule({
    declarations: [
        AppComponent,
        HighlightDirective,
    ],
    imports: [
        BrowserModule,
        AppRoutingModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Тепер можна використовувати директиву myHighlight до елементів у компонентах Angular.

 <main>
<p myHighlight>Текст для підсвічування</p>
</main>

Запустіть проект на сервері розробки, щоб перевірити, чи працює директива. Це можна зробити, виконавши команду в терміналі:

 ng serve

Після виконання команди, перейдіть до http://localhost:4200/ у браузері, і ви побачите інтерфейс, схожий на наступне зображення.

Вбудовані директиви Angular можуть приймати значення для зміни зовнішнього вигляду елемента, але кастомна директива myHighlight наразі не може. Можна налаштувати директиву так, щоб вона приймала значення для динамічного встановлення кольору фону.

Замініть код у файлі highlight.directive.ts наступним:

 import { Directive, ElementRef, Input } from "@angular/core";
@Directive({
    selector: "[myHighlight]"
})

export class HighlightDirective {
    @Input() set myHighlight(color: string) {
        this.element.nativeElement.style.backgroundColor = color;
    }

    constructor(private element: ElementRef) {
    }
}

У цьому коді клас HighlightDirective містить метод set myHighlight, який приймає параметр color типу string. Метод позначено декоратором @Input, що дозволяє передавати значення кольору в директиву з батьківського компонента.

Тепер можна задати колір фону, передавши значення в директиву myHighlight.

Приклад:

 <main>
<p myHighlight="pink">Текст для підсвічування</p>
</main>

Створення Спеціальної Структурної Директиви

В попередніх розділах ми розглянули, як створювати, додавати поведінку та використовувати атрибутивні директиви. Атрибутивні директиви змінюють вигляд DOM елементів, в той час як структурні директиви додають, видаляють або переміщують елементи в DOM.

Angular пропонує дві структурні директиви, ngFor та ngIf. Директива ngFor відображає шаблон для кожного елемента колекції (масиву), а ngIf реалізує умовний рендеринг.

У цьому розділі ми створимо кастомну структурну директиву, яка буде працювати аналогічно ngIf. Для цього створіть файл condition.directive.ts.

В файлі condition.directive.ts розмістіть наступний код:

 import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'
@Directive({
    selector: "[condition]"
})

export class ConditionDirective {

    @Input() set condition(arg: boolean) {
        if(arg) {
            this.viewContainer.createEmbeddedView(this.template)
        } else {
            this.viewContainer.clear();
        }
    }

    constructor(
private template: TemplateRef<unknown>,
private viewContainer: ViewContainerRef
) {}
}

Цей код дозволяє умовно відображати елементи, застосовуючи директиву condition та передаючи булеве значення з батьківського компонента.

В конструкторі класу ConditionDirective, ми вставляємо екземпляр TemplateRef та ViewContainerRef. TemplateRef представляє шаблон, пов’язаний з директивою, а ViewContainerRef представляє контейнер, в якому відображаються view.

Сеттер класу ConditionDirective використовує оператор if else для перевірки параметра arg. Директива створює вбудований view, використовуючи наданий шаблон, якщо параметр має значення true. Метод createEmbeddedView класу ViewContainerRef створює та відображає view в DOM.

Якщо параметр має значення false, директива очищає контейнер перегляду за допомогою методу clear класу ViewContainerRef, видаляючи всі попередньо відображені view.

Після створення директиви, її потрібно зареєструвати у проекті, імпортувавши та оголосивши її у файлі app.module.ts. Після цього можна використовувати директиву в шаблонах.

Приклад використання:

 <main>
<p *condition="true">Привіт!</p>
</main>

Тепер Ви Можете Створювати Власні Директиви

Кастомні директиви Angular надають ефективний механізм для маніпулювання DOM та додавання динамічної поведінки в шаблони. Ви дізнались, як створювати та використовувати атрибутивні і структурні директиви у додатках Angular. Розуміння процесу створення та використання кастомних директив розкриває весь потенціал Angular.