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

Після довгої гри з Angular я нарешті придумав зрозуміле пояснення директив Angular. У цій статті ми спочатку зрозуміємо, що таке директива і як використовувати її в Angular. Ми також створимо власні власні директиви. То що ми чекаємо? Зануримось глибоко в це.

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

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

З основної концепції Angular директиви поділяються на три категорії.

  1. Директиви щодо атрибутів
  2. Структурні директиви
  3. Компоненти

Директиви щодо атрибутів

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

Структурні директиви

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

Ви можете легко розрізнити структурну та директиву атрибутів, розглянувши синтаксис. Назва Структурної директиви завжди починається з префікса зірочки (*), тоді як Директива про атрибути не містить жодного префікса. Три найпопулярніші вбудовані структурні директиви, які забезпечує Angular, - це NgIf , NgFor та NgSwitch .

Компоненти

Компоненти - це директиви з шаблонами. Єдина різниця між компонентами та іншими двома типами директив - це шаблон. Атрибути та структурні директиви не мають шаблонів. Отже, можна сказати, що Компонент - це більш чиста версія Директиви із шаблоном, який простіший у використанні.

Використання кутових вбудованих директив

У Angular існує багато вбудованих директив, якими ви можете легко користуватися. У цьому розділі ми будемо використовувати дві дуже прості вбудовані директиви.

Директива NgStyle - це директива атрибутів, яка використовується для зміни стилю будь-якого елемента DOM на основі певної умови.

I am an Attribute Directive

У наведеному вище фрагменті коду ми додаємо синій фон, якщо значення isBlueзмінної істинне. Якщо значення isBlueзмінної хибне, тоді фон вищевказаного елемента буде червоним.

Директива NgIf - це структурна директива, яка використовується для додавання елементів у DOM згідно з деякими умовами.

I am a Structural Directive

У наведеному вище фрагменті коду весь абзац залишатиметься в DOM, якщо значення showзмінної істинне, інакше він почнеться з DOM.

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

Створення користувацької директиви подібно до створення компонента Angular. Щоб створити власну директиву, ми повинні замінити @Componentдекоратор на @Directiveдекоратор.

Отже, давайте почнемо зі створення нашої першої директиви "Спеціальні атрибути". У цій директиві ми збираємося виділити вибраний елемент DOM, встановивши колір фону елемента.

Створіть app-highlight.directive.tsфайл у src/appпапці та додайте фрагмент коду нижче.

import { Directive, ElementRef } from '@angular/core';
@Directive({
 selector: '[appHighlight]'
})
export class HighlightDirective {
 constructor(private eleRef: ElementRef) {
 eleRef.nativeElement.style.background = 'red';
 }
}

Тут ми імпортуємо Directiveі ElementRefз Angular core. DirectiveЗабезпечує функціональність @Directiveдекоратора , в якому ми забезпечуємо селектор властивостей для appHighLightтого , щоб ми можемо використовувати цей селектор де - небудь в додатку. Ми також імпортуємо, ElementRefякий відповідає за доступ до елемента DOM.

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

import ...;
import { ChangeThemeDirective } from './app-highlight.directive';
@NgModule({
declarations: [
AppComponent,
ChangeThemeDirective
],
imports: [
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Тепер ми будемо використовувати нашу нещодавно створену спеціальну директиву. Я додаю appHightlightдирективу в, app.component.htmlале ви можете використовувати її в будь-якому місці програми.

Highlight Me !

Висновок наведеного вище фрагмента коду буде виглядати так.

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

У попередньому розділі ми створили свою першу директиву Attribute. Той самий підхід використовується і для створення структурної директиви.

Отже, давайте почнемо зі створення нашої структурної директиви. У цій директиві ми збираємось реалізувати *appNotдирективу, яка працюватиме прямо протилежно *ngIf.

Тепер створіть app-not.directive.tsфайл у src/appпапці та додайте код нижче.

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({
 selector: '[appNot]'
})
export class AppNotDirective {
constructor(
 private templateRef: TemplateRef,
 private viewContainer: ViewContainerRef) { }
 @Input() set appNot(condition: boolean) {
 if (!condition) {
 this.viewContainer.createEmbeddedView(this.templateRef);
 } else {
 this.viewContainer.clear(); }
 }
}

Як ви бачили у наведеному вище фрагменті коду, ми імпортуємо Directive, Input, TemplateRef and ViewContainerRefз@angular/core.

Directiveзабезпечує однакову функціональність для @Directiveдекоратора. InputДекоратор використовується для зв'язку між цими двома компонентами. Він передає дані від одного компонента до іншого за допомогою прив'язки властивостей.

TemplateRefпредставляє вбудований шаблон, який використовується для створення екземплярів вбудованих подань. Ці вбудовані подання пов’язані із шаблоном, який повинен бути відтворений.

ViewContainerRefє контейнером, до якого можна приєднати один або кілька видів. Ми можемо використовувати createEmbeddedView()функцію для приєднання вбудованих шаблонів до контейнера.

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

import ...;
import { AppNotDirective } from './app-not.directive';
@NgModule({
declarations: [
AppComponent,
AppNotDirective
],
imports: [
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Тепер настав час скористатися нашою новоствореною структурною директивою.

Я додаю appNotдирективу в, app.component.htmlале ви можете використовувати її в будь-якому місці програми.

True

False

*appNotДиректива розроблена таким чином , щоб він приєднує шаблон елемент в DOM , якщо *appNotзначення як falseраз навпаки *ngIfдирективи.

Висновок наведеного вище фрагмента коду буде виглядати так.

Сподіваюся, ця стаття відповіла на більшість ваших запитань щодо директив Angular. Якщо у вас є якісь запитання чи сумніви, не соромтеся звертатися до мене у поле для коментарів.