Hogyan készítsünk egyéni irányelveket Angular-ban

Az Angular egyik legfontosabb jellemzője az irányelvek. A szögdirektívák segítségével viselkedést adhat a DOM-elemekhez. Az Angular számos beépített direktívát biztosít, és egyéni direktívákat is létrehozhat ebben a robusztus keretrendszerben.

Tartalomjegyzék

Mik azok az irányelvek?

Az irányelvek olyan egyéni kódok, amelyeket az Angular használ egy HTML-elem viselkedésének vagy megjelenésének módosítására. Irányelvek segítségével eseményfigyelőket adhat hozzá, módosíthatja a DOM-ot, illetve megjeleníthet vagy elrejthet elemeket.

Az Angular-ban kétféle beépített direktíva létezik, a strukturális és az attribútum. A strukturális direktívák megváltoztatják a DOM szerkezetét, míg az attribútum direktívák egy elem megjelenését vagy viselkedését. Az irányelvek hatékony módszert jelentenek az Angular alkatrészek funkcionalitásának kiterjesztésére.

Az irányelvek előnyei

Íme néhány előnye az Angular-ban való direktívák használatának:

Újrafelhasználhatóság: Az utasításokat több összetevőben is használhatja, így időt és erőfeszítést takaríthat meg.
Bővíthetőség: Kibővítheti az irányelveket, hogy új funkciókat adjon hozzá, így az összetevők még hatékonyabbak lesznek.
Rugalmasság: A direktívák használatával többféleképpen módosíthatja egy elem viselkedését vagy megjelenését, ami nagy rugalmasságot biztosít az alkalmazások felépítése során.

Az Angular alkalmazás beállítása

Egy Angular alkalmazás beállításához telepítse az Angular CLI-t a következő kód futtatásával a terminálon:

 npm install -g @angular/cli

Az Angular CLI telepítése után hozzon létre egy Angular projektet a következő parancs futtatásával:

 ng new custom-directives-app

A fenti parancs futtatásával egy Angular projekt jön létre custom-directives-app néven.

Egyéni irányelv megalkotása

Most már van egy Angular projektje, és megkezdheti az egyéni direktívák létrehozását. Hozzon létre egy TypeScript fájlt, és határozzon meg egy osztályt, amelyet a @Directive dekorátor díszít.

Hogyan lehet törölni az Adobe-fiókot

A @Directive dekorátor egy TypeScript-dekorátor, amelyet egyéni direktívák létrehozására használnak. Most hozzon létre egy highlight.directive.ts fájlt az src/app könyvtárban. Ebben a fájlban létrehozza az egyéni direktíva kiemelését.

Például:

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

A fenti kódblokk importálja az irányelv dekorátort az @angular/core modulból. A @Directive dekorátor a HighlightDirective osztályt díszíti. Egy objektumot vesz fel argumentumként egy szelektor tulajdonsággal.

Ebben az esetben a kiválasztó tulajdonságot erre kell beállítani [myHighlight] Ez azt jelenti, hogy alkalmazhatja ezt az utasítást a sablonokra, ha hozzáadja a myHighlight attribútumot egy elemhez.

Íme egy példa arra, hogyan kell használni az irányelvet a sablonokban:

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

Viselkedés kiegészítése az irányelvvel

Sikeresen létrehozott egy direktívát. A következő lépés egy olyan viselkedés hozzáadása az direktívához, amely képes manipulálni a DOM-ot. Szüksége lesz a @angular/core ElementRef-re, hogy viselkedést adjon egy direktívához.

Az ElementRef-et a direktíva konstruktorába kell beilleszteni. Az ElementRef a nézeten belüli natív elem körüli burkolólap.

Íme egy példa arra, hogyan adhat hozzá viselkedést egy direktívához:

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

Ebben a példában a HighlightDirective osztály konstruktora egy ElementRef paramétert vesz fel, amelyet az Angular automatikusan bead. Az ElementRef hozzáférést biztosít az alapul szolgáló DOM-elemhez.

Ezzel az.element.nativeElement tulajdonsággal érheti el az elemparaméter natív DOM elemét. Ezután a stílus tulajdonság segítségével állítsa be az összetevő háttérszínét világoskékre. Ez azt jelenti, hogy bármilyen elemre alkalmazza a myHighlight direktívát, annak világoskék háttere lesz.

A 7 legjobb Kodi sportkiegészítő

Az irányelv működőképessé tételéhez importálja és deklarálja az app.module.ts fájlban.

Például:

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

Most már alkalmazhatja a myHighlight direktívát az Angular összetevők elemeire.

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

Futtassa az alkalmazást a fejlesztőkiszolgálón, hogy tesztelje, működik-e az irányelv. Ezt megteheti a következő parancs futtatásával a terminálon:

 ng serve

A parancs futtatása után navigáljon a http://localhost:4200/ címre a webböngészőjében, és az alábbi képhez hasonló felületet fog látni.

A szögletes beépített direktívák elfogadnak értékeket az elemek megjelenésének megváltoztatásához, de a myHighlight egyéni direktíva nem. A direktívát beállíthatja úgy, hogy elfogadjon egy értéket, amelyet a sablon háttérszínének dinamikus beállítására használ.

Ehhez cserélje ki a highlight.directive.ts fájl kódját a következőre:

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

A fenti kódblokkban a HighlightDirective osztály egy myHighlight nevű setter metódust tartalmaz. Ez a módszer a típuskarakterlánc színparaméterét veszi fel. A setter metódust az @Input dekorátorral díszítjük, lehetővé téve a színérték átadását a szülőkomponens direktívájának.

Most meghatározhatja a háttérszínt úgy, hogy értéket ad át a myHighlight direktívának.

Például:

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

Egyéni strukturális irányelv megalkotása

Az előző szakaszokban megtanulta, hogyan hozhat létre, hogyan adhat hozzá viselkedéseket, és hogyan alkalmazhat egyéni attribútum-irányelveket a sablonra. Az attribútum direktívák megváltoztatják a DOM-elemek megjelenését, míg a strukturális direktívák hozzáadnak, távolítanak el vagy helyeznek át elemeket a DOM-ban.

12 legjobb keretrendszer és eszközkészlet asztali alkalmazások létrehozásához

Az Angular két szerkezeti direktívát biztosít, az ngFor és az ngIf. Az ngFor direktíva a gyűjtemény (tömb) minden eleméhez készít egy sablont, míg az ngIf kezeli a feltételes megjelenítést.

Ebben a részben egy egyéni strukturális direktívát fog létrehozni, amely az ngIf direktívához hasonlóan működik. Ehhez hozzon létre egy condition.directive.ts fájlt.

A condition.directive.ts fájlba írja be ezt a kódot:

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

Ez a kódblokk lehetővé teszi az elemek feltételes megjelenítését úgy, hogy a feltétel direktívát alkalmazza egy elemre, és logikai értéket ad át a szülőkomponensből.

A ConditionDirective osztály konstruktorába beadja a TemplateRef és a ViewContainerRef egy példányát. A TemplateRef az irányelvhez társított sablont, a ViewContainerRef pedig azt a tárolót jelöli, ahol az alkalmazás megjeleníti a nézeteket.

A ConditionDirective osztálybeállító metódus if else utasítást használ az arg paraméter ellenőrzéséhez. Az irányelv egy beágyazott nézetet hoz létre a megadott sablon használatával, ha a paraméter igaz. A ViewContainerRef osztály createEmbeddedView metódusa hozza létre és jeleníti meg a nézetet a DOM-ban.

Ha a paraméter hamis, a direktíva a ViewContainerRef osztály törlési metódusával törli a nézettárolót. Ez eltávolítja a korábban megjelenített nézeteket a DOM-ból.

A direktíva létrehozása után regisztrálja azt a projektben az importálással és deklarálva az app.module.ts fájlban. Ezt követően elkezdheti használni a direktívát a sablonokban.

Íme egy példa a sablonokban való használatára:

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

Most egyéni irányelveket hozhat létre

Az Angular egyéni direktívái hatékony módot biztosítanak a DOM manipulálására, és dinamikus viselkedést adnak a sablonokhoz. Megtanulta, hogyan hozhat létre és alkalmazhat egyéni attribútumokat és strukturális direktívákat az Angular alkalmazásaiban. Az egyéni direktívák létrehozásának és használatának megértésével teljes mértékben kihasználhatja az Angular képességeit.