Ангулар-ове прилагођене директиве нуде робустан механизам за модификацију ДОМ-а и укључивање динамичког понашања у ваше шаблоне.

Једна од кључних карактеристика Ангулар-а су директиве. Угаоне директиве су начин да додате понашање ДОМ елементима. Ангулар обезбеђује низ уграђених директива, а такође можете креирати прилагођене директиве у овом робусном оквиру.

Шта су директиве?

Директиве су прилагођени кодови које Ангулар користи да модификује понашање или изглед ХТМЛ елемента. Можете да користите директиве да додате слушаоце догађаја, промените ДОМ или прикажете или сакријете елементе.

Постоје две врсте уграђене директиве у Ангулар, структурне и атрибутне. Структурне директиве мењају структуру ДОМ-а, док атрибутне директиве мењају изглед или понашање елемента. Директиве су моћан начин да се прошири функционалност Ангулар компоненти.

Предности директива

Ево неких од предности коришћења директива у Ангулару:

  • Поновна употреба: Можете користити директиве у више компоненти, штедећи време и труд.
  • Проширивост: Можете проширити директиве да бисте додали нову функционалност, чинећи ваше компоненте моћнијим.
  • Флексибилност: Користећи директиве, можете модификовати понашање или изглед елемента на различите начине, дајући вам велику флексибилност приликом израде ваших апликација.

Подешавање ваше Ангулар апликације

Да бисте подесили Ангулар апликацију, инсталирајте Ангулар ЦЛИ тако што ћете покренути следећи код у свом терминалу:

npm install -g @angular/cli

Након инсталирања Ангулар ЦЛИ, креирајте Ангулар пројекат тако што ћете покренути следећу команду:

ng new custom-directives-app

Извођење горње команде ће креирати Ангулар пројекат под називом цустом-дирецтивес-апп.

Креирање прилагођене директиве

Сада имате Ангулар пројекат и можете почети да креирате своје прилагођене директиве. Креирајте ТипеСцрипт датотеку и дефинишите класу украшену са @Директива декоратер.

Тхе @Директива декоратор је ТипеСцрипт декоратор који се користи за креирање прилагођених директива. Сада креирајте а хигхлигхт.дирецтиве.тс фајл у срц/апп именик. У овој датотеци ћете креирати прилагођену директиву истакнути.

На пример:

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

Горњи блок кода увози Директива декоратер из @ангулар/цоре модул. Тхе @Директива декоратер украшава ХигхлигхтДирецтиве класа. Узима објекат као аргумент са а селектор имовина.

У овом случају, постављате селектор власништво до [миХигхлигхт] што значи да ову директиву можете применити на своје шаблоне додавањем миХигхлигхт атрибут елементу.

Ево примера како да користите директиву у својим шаблонима:


Some text</p>
</main>

Додавање понашања у Директиву

Сада сте успешно креирали директиву. Следећи корак је додавање понашања директиви тако да може да манипулише ДОМ-ом. Требаће вам ЕлементРеф са @ангулар/цоре да бисте додали понашање директиви.

Убацићете ЕлементРеф у конструктор директиве. ЕлементРеф је омотач око природног елемента унутар погледа.

Ево примера како додајете понашање у директиву:

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

У овом примеру, конструктор за ХигхлигхтДирецтиве класа узима параметар ЕлементРеф, који Ангулар аутоматски убацује. ЕлементРеф пружа приступ основном ДОМ елементу.

Користећи тхис.елемент.нативеЕлемент својству, приступате изворном ДОМ елементу елемент параметар. Затим поставите боју позадине компоненте на светло плава помоћу стил имовина. То значи да који год елемент примените миХигхлигхт директива за имаће светлоплаву позадину.

Да би директива била функционална, уверите се да сте је увезли и декларисали у апп.модуле.тс фајл.

На пример:

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

Сада можете применити директиву миХигхлигхт на елементе у вашим Ангулар компонентама.


Some text</p>
</main>

Покрените своју апликацију на развојном серверу да бисте тестирали да ли је директива функционална. То можете учинити тако што ћете покренути следећу команду у свом терминалу:

ng serve

Након што покренете команду, идите на http://localhost: 4200/ на вашем веб претраживачу и видећете интерфејс који изгледа као на слици испод.

Ангулар уграђене директиве прихватају вредности за промену изгледа елемента, али прилагођене директиве миХигхлигхт не. Можете да конфигуришете директиву да прихвати вредност коју ће користити за динамичко подешавање боје позадине шаблона.

Да бисте то урадили, замените код у хигхлигхт.дирецтиве.тс фајл са овим:

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

У блоку кода изнад, тхе ХигхлигхтДирецтиве класа садржи метод за постављање под називом миХигхлигхт. Овај метод захтева а боја параметар низа типа. Ви украшавате метод постављања са @Улазни декоратор, који вам омогућава да проследите вредност боје у директиву из надређене компоненте.

Сада можете одредити боју позадине тако што ћете проследити вредност директиви миХигхлигхт.

На пример:


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

Креирање прилагођене структурне директиве

У претходним одељцима научили сте како да креирате, додате понашања и примените директиве прилагођених атрибута на ваш шаблон. Атрибутске директиве мењају изглед ДОМ елемената, док структурне директиве додају, уклањају или померају елементе у ДОМ-у.

Ангулар обезбеђује две структурне директиве, нгФор и нгИф. Директива нгФор приказује шаблон за сваку ставку у колекцији (низу), док је нгИф обрађује условно приказивање.

У овом одељку ћете креирати прилагођену структурну директиву која функционише као нгИф директива. Да бисте то урадили, креирајте а цондитион.дирецтиве.тс фајл.

У цондитион.дирецтиве.тс датотеку, напишите овај код:

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

Овај блок кода вам омогућава да условно прикажете елементе применом стање директиву елементу и прослеђивање логичке вредности из родитељске компоненте.

У конструктору ЦондитионДирецтиве цласс, ви убацујете инстанцу ТемплатеРеф и ВиевЦонтаинерРеф. ТемплатеРеф представља шаблон повезан са директивом, а ВиевЦонтаинерРеф представља контејнер у коме апликација приказује погледе.

Метода за подешавање класе ЦондитионДирецтиве користи наредбу иф елсе да провери параметар арг. Директива креира уграђени приказ користећи дати шаблон ако је параметар тачан. Тхе цреатеЕмбеддедВиев метод класе ВиевЦонтаинерРеф креира и приказује поглед у ДОМ-у.

Ако је параметар лажно, директива брише контејнер за приказ користећи јасно метод класе ВиевЦонтаинерРеф. Ово уклања све претходно приказане приказе из ДОМ-а.

Након креирања директиве, региструјте је у свом пројекту тако што ћете је увести и декларисати у апп.модуле.тс фајл. Након што ово урадите, можете почети да користите директиву у својим шаблонима.

Ево примера како да га користите у својим шаблонима:


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

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

Прилагођене директиве у Ангулар-у пружају моћан начин за манипулисање ДОМ-ом и додавање динамичког понашања вашим шаблонима. Научили сте како да креирате и примените прилагођене атрибуте и структурне директиве у вашим Ангулар апликацијама. Ако разумете како да креирате и користите прилагођене директиве, можете у потпуности искористити могућности Ангулар-а.