Как да създавате персонализирани директиви в 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 проект с име персонализирани директиви-приложение.

Създаване на персонализирана директива

Сега имате Angular проект и можете да започнете да създавате персонализирани директиви. Създайте TypeScript файл и дефинирайте клас, украсен с @Директива декоратор.

The @Директива decorator е TypeScript декоратор, използван за създаване на персонализирани директиви. Сега създайте a highlight.directive.ts файл в src/приложение указател. В този файл ще създадете персонализираната директива подчертайте.

Например:

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

Кодовият блок по-горе импортира Директива декоратор от @ъглово/ядро модул. The @Директива декоратор украсява HighlightDirective клас. Той приема обект като аргумент с a селектор Имот.

В този случай вие задавате селектор собственост към [myHighlight] което означава, че можете да приложите тази директива към вашите шаблони, като добавите myHighlight атрибут към елемент.

Ето пример как да използвате директивата във вашите шаблони:

Some text</p>
</main>

Добавяне на поведение към директивата

Сега успешно създадохте директива. Следващата стъпка е да добавите поведение към директивата, така че да може да манипулира DOM. Ще имате нужда от ElementRef от @angular/core, за да добавите поведение към директива.

Ще инжектирате ElementRef в конструктора на директивата. ElementRef е обвивка около естествен елемент в изглед.

Ето пример за това как добавяте поведение към директива:

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

В този пример конструкторът на HighlightDirective класът приема параметър ElementRef, който Angular автоматично инжектира. ElementRef осигурява достъп до основния DOM елемент.

Използвайки this.element.nativeElement свойство, имате достъп до собствения DOM елемент на елемент параметър. След това задавате цвета на фона на компонента на светло синьо използвайки стил Имот. Това означава, че какъвто и елемент да приложите 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]
})
exportclassAppModule{ }

Сега можете да приложите директивата myHighlight към елементите във вашите Angular компоненти.

Some text</p>
</main>

Стартирайте приложението си на сървъра за разработка, за да тествате дали директивата е функционална. Можете да направите това, като изпълните следната команда във вашия терминал:

ng serve

След като изпълните командата, отидете до http://localhost: 4200/ на вашия уеб браузър и ще видите интерфейс, който изглежда като изображението по-долу.

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

За да направите това, заменете кода в highlight.directive.ts файл с това:

import { Directive, ElementRef, Input } from"@angular/core";
@Directive({
 selector: "[myHighlight]"
})
exportclassHighlightDirective{
 @Input() set myHighlight(color: string) {
this.element.nativeElement.style.backgroundColor = color;
 }
constructor(private element: ElementRef) { 
 }
}

В кодовия блок по-горе, HighlightDirective класът съдържа метод за настройка, наречен myHighlight. Този метод отнема a цвят параметър на типа низ. Украсявате метода на сетер с @Вход декоратор, който ви позволява да предадете стойността на цвета в директивата от родителския компонент.

Сега можете да определите цвета на фона, като подадете стойност към директивата myHighlight.

Например:

'pink'>Some text</p>
</main>

Създаване на персонализирана структурна директива

В предишните раздели научихте как да създавате, добавяте поведения и прилагате директиви за персонализирани атрибути към вашия шаблон. Директивите за атрибути променят външния вид на DOM елементите, докато структурните директиви добавят, премахват или преместват елементи в DOM.

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

В този раздел ще създадете персонализирана структурна директива, която функционира като ngIf директива. За да направите това, създайте a условие.директива.ts файл.

В условие.директива.ts файл, напишете този код:

import { Directive, Input, TemplateRef, ViewContainerRef } from'@angular/core'
@Directive({
 selector: "[condition]"
})
exportclassConditionDirective{
 @Input() set condition(arg: boolean) {
if(arg) {
this.viewContainer.createEmbeddedView(this.template)
 } else {
this.viewContainer.clear();
 }
 }
constructor(
 private template: TemplateRef, 
 private viewContainer: ViewContainerRef 
 ) {}
}

Този кодов блок ви позволява да изобразявате условно елементи чрез прилагане на състояние директива към елемент и предаване на булева стойност от родителския компонент.

В конструктора на ConditionDirective клас, инжектирате екземпляр на TemplateRef и ViewContainerRef. TemplateRef представлява шаблона, свързан с директивата, а ViewContainerRef представлява контейнера, където приложението изобразява изгледите.

Методът за настройка на клас ConditionDirective използва оператор if else, за да провери параметъра arg. Директивата създава вграден изглед, използвайки предоставения шаблон, ако параметърът е верен. The createEmbeddedView метод на класа ViewContainerRef създава и изобразява изгледа в DOM.

Ако параметърът е невярно, директивата изчиства контейнера за изглед с помощта на ясно метод на класа ViewContainerRef. Това премахва всички изобразени преди това изгледи от DOM.

След като създадете директивата, регистрирайте я във вашия проект, като я импортирате и декларирате в app.module.ts файл. След като направите това, можете да започнете да използвате директивата във вашите шаблони.

Ето пример как да го използвате във вашите шаблони:

"true">Hello There!!!</p>
</main>

Сега можете да създавате персонализирани директиви

Персонализираните директиви в Angular предоставят мощен начин за манипулиране на DOM и добавяне на динамично поведение към вашите шаблони. Научихте как да създавате и прилагате персонализирани атрибути и структурни директиви във вашите Angular приложения. Като разберете как да създавате и използвате персонализирани директиви, можете да се възползвате напълно от възможностите на Angular.