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

Однією з ключових особливостей Angular є директиви. Директиви Angular — це спосіб додати поведінку до елементів DOM. Angular надає різноманітні вбудовані директиви, і ви також можете створювати власні директиви в цій надійній структурі.

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

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

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

Переваги директив

Ось деякі з переваг використання директив в Angular:

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

Налаштування програми Angular

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

 npm install -g @angular/cli

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

 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() {}
}
 

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

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

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

 <main>
<p myHighlight>Some text</p>
</main>

Додавання поведінки до Директиви

Тепер ви успішно створили директиву. Наступним кроком є ​​додавання поведінки до директиви, щоб вона могла маніпулювати DOM. Вам знадобиться ElementRef з @angular/core, щоб додати поведінку до директиви.

Ви вставите ElementRef у конструктор директиви. ElementRef — це обгортка навколо рідного елемента всередині представлення.

Ось приклад того, як ви додаєте поведінку до директиви:

 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. Потім ви встановлюєте світло-блакитний колір тла компонента за допомогою властивості style. Це означає, що будь-який елемент, до якого ви застосовуєте директиву 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>Some text</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 містить метод налаштування під назвою myHighlight. Цей метод приймає колірний параметр типу string. Ви прикрашаєте метод налаштування за допомогою декоратора @Input, що дозволяє передавати значення кольору в директиву з батьківського компонента.

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

Наприклад:

 <main>
<p myHighlight="pink">Some text</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 
) {}
}
 

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

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

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

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

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

Ось приклад того, як використовувати його у своїх шаблонах:

 <main>
<p *condition="true">Hello There!!!</p>
</main>

Тепер ви можете створювати власні директиви

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