Miután hosszú ideig játszottam az Angularral, végül előálltam az Angular irányelvek érthető magyarázatával. Ebben a cikkben először meg fogjuk érteni, hogy mi is az az irányelv, és hogyan kell használni azt Angular-ban. Saját egyedi irányelveket is létrehozunk. Tehát mire várunk? Merüljünk bele mélyen.

Mi az a szögirányelv?

Az irányelvek azok a függvények, amelyeket akkor hajtanak végre, amikor az Angular fordító megtalálja . Az Angular direktívák növelik a HTML elemek képességét azáltal, hogy egyedi viselkedéseket csatolnak a DOM-hoz.

Az alapkoncepciótól kezdve a szögletes irányelveket három kategóriába sorolják.

1. Attribútum irányelvek
2. Strukturális irányelvek
3. Alkatrészek

Attribútum irányelvek

Az attribútum irányelvek felelősek a DOM elemek megjelenésének és viselkedésének manipulálásáért. Az attribútum direktívákkal megváltoztathatjuk a DOM elemek stílusát. Ezeket az irányelveket arra is használják, hogy bizonyos DOM elemeket feltételesen elrejtsenek vagy megjelenítsenek. Az Angular számos beépített attribútum direktívát biztosít, mint például az NgStyle , az NgClass stb. A kívánt funkcionalitáshoz saját egyedi attribútum irányelveket is létrehozhatunk.

Strukturális irányelvek

A strukturális irányelvek felelősek a DOM struktúrájának megváltoztatásáért. Úgy működnek, hogy az elemeket hozzáadják vagy eltávolítják a DOM-ból, ellentétben az attribútum irányelvekkel, amelyek csak megváltoztatják az elem megjelenését és viselkedését.

Könnyedén megkülönböztetheti a strukturális és az attribútum irányelveket, ha megnézi a szintaxist. A Strukturális irányelv neve mindig csillag (*) előtaggal kezdődik, míg az Attribútum irányelv nem tartalmaz előtagot. A három legnépszerűbb beépített szerkezeti irányelv, amelyet az Angular biztosít, az NgIf , NgFor és NgSwitch .

Alkatrészek

Az alkatrészek sablonokkal rendelkező irányelvek. Az egyetlen különbség a Komponensek és a másik két irányelv között a Sablon. Az attribútum és a strukturális irányelvek nem rendelkeznek sablonokkal. Tehát elmondhatjuk, hogy a komponens az irányelv tisztább változata, sablonnal, amelyet könnyebb használni.

A szögletes beépített irányelvek használata

Nagyon sok beépített irányelv érhető el az Angularban, amelyeket egyszerűen használhat. Ebben a részben két nagyon egyszerű beépített irányelvet fogunk használni.

Az NgStyle direktíva egy attribútum irányelv, amelyet bármely DOM elem stílusának megváltoztatására használnak valamilyen feltétel alapján.

 I am an Attribute Directive

A fenti kódrészletben hozzáadunk egy kék hátteret, ha a isBlueváltozó értéke igaz. Ha a isBlueváltozó értéke hamis, akkor a fenti elem háttere piros lesz.

Az NgIf direktíva olyan strukturális irányelv, amelyet bizonyos feltételek szerint elemek hozzáadásához használnak a DOM-ban.

I am a Structural Directive

A fenti kódrészletben az egész bekezdés a DOM-ban marad, ha a showváltozó értéke igaz, különben elindul a DOM-ból.

Egyéni attribútum irányelv létrehozása

Egyéni irányelv létrehozása ugyanolyan, mint egy szögletes összetevő létrehozása. Egy egyedi irányelv létrehozásához le kell cserélnünk a @Componentdekoratort a @Directivedekoratőrre.

Tehát kezdjük az első egyedi attribútum irányelv létrehozásával. Ebben az irányelvben kiemelni fogjuk a kiválasztott DOM elemet egy elem háttérszínének beállításával.

Hozzon létre egy app-highlight.directive.tsfájlt a src/appmappában, és adja hozzá az alábbi kódrészletet.

import { Directive, ElementRef } from '@angular/core';

@Directive({

 selector: '[appHighlight]'

})

export class HighlightDirective {

 constructor(private eleRef: ElementRef) {

 eleRef.nativeElement.style.background = 'red';

 }

}

Itt importálunk Directiveés ElementRefszögmagból. A dekorátor Directivefunkcionalitását @Directivebiztosítja, amelynek tulajdonságválasztóját biztosítjuk appHighLight, hogy ezt a választót az alkalmazás bárhol felhasználhassuk. Importáljuk azt is, ElementRefamely felelős a DOM elem eléréséért.

Most, hogy appHighlightaz irányelv a munkát, meg kell adni a irányelvnek a nyilatkozatok tömb a app.module.tsfájlt.

import ...;

import { ChangeThemeDirective } from './app-highlight.directive';

@NgModule({

declarations: [

AppComponent,

ChangeThemeDirective

],

imports: [

...

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Most az újonnan létrehozott egyedi irányelvünket fogjuk használni. Hozzáadom az appHightlightirányelvet, app.component.htmlde az alkalmazásban bárhol használhatja.

Highlight Me !

A fenti kódrészlet kimenete így fog kinézni.

Egyedi strukturális irányelv létrehozása

Az előző szakaszban hoztuk létre az első attribútum irányelvünket. Ugyanezt a megközelítést alkalmazzák a strukturális irányelv létrehozására is.

Tehát kezdjük a strukturális irányelv megalkotásával. Ebben az irányelvben az *appNotellenkezőjével működő irányelvet fogjuk végrehajtani *ngIf.

Most hozzon létre egy app-not.directive.tsfájlt a src/appmappában, és adja hozzá az alábbi kódot.

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

 }

}

Amint a fenti kódrészletben látta, Directive, Input, TemplateRef and ViewContainerRefinnen importálunk@angular/core.

Directiveugyanazt a funkciót biztosítja a @Directivedekoratőr számára. A Inputdekoratort a két alkatrész közötti kommunikációra használják. Tulajdonság-összerendeléssel küld adatokat az egyik komponensből a másikba.

TemplateRefa beágyazott sablont jelenti, amelyet a beágyazott nézetek példányosítására használnak. Ezek a beágyazott nézetek összekapcsolódnak a megjelenítendő sablonnal.

ViewContainerRefolyan tároló, ahová egy vagy több nézet csatolható. Használhatjuk a createEmbeddedView()függvényt a beágyazott sablonok csatolásához a tárolóba.

appNotAhhoz , hogy az irányelv működjön, hozzá kell adnunk az irányelvünket a app.module.tsfájlban található deklarációk tömbhöz .

import ...;

import { AppNotDirective } from './app-not.directive';

@NgModule({

declarations: [

AppComponent,

AppNotDirective

],

imports: [

...

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Itt az ideje használni újonnan létrehozott strukturális irányelvünket.

Hozzáadom az appNotirányelvet, app.component.htmlde az alkalmazásban bárhol használhatja.

True
False

Az *appNotirányelv úgy van megtervezve, hogy a sablon elemet csatolja a DOM-hoz, ha az *appNotérték falseéppen ellentétes az *ngIfirányelvvel.

A fenti kódrészlet kimenete így fog kinézni.

Remélem, hogy ez a cikk megválaszolta az Angular irányelvekkel kapcsolatos legtöbb kérdését. Ha bármilyen kérdése vagy kétsége van, nyugodtan forduljon hozzám a megjegyzés rovatban.