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

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

Преглед садржаја

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

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

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

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

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

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

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

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

 npm install -g @angular/cli

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

 ng new custom-directives-app

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

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

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

Како се верификовати на ТикТок-у без пратилаца

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

На пример:

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

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

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

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

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

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

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

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

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

 import { Directive, ElementRef } from "@angular/core";@Directive({
    selector: "[myHighlight]"
})
export class HighlightDirective {
    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]
})
export class AppModule { }

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

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

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

 ng serve

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

Како виртуелна стварност револуционише индустрију игара

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

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

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

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

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

На пример:

 <main>
<p myHighlight="pink">Some text</p>
</main>

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

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

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

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

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

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

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

Е-Инк таблет за продуктивност

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

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

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

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

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

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

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

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