Kako izgraditi prilagođene direktive u Angularu

Jedna od ključnih značajki Angulara su direktive. Angular direktive su način na koji možete dodati ponašanje DOM elementima. Angular pruža razne ugrađene direktive, a možete stvoriti i prilagođene direktive u ovom robusnom okviru.

Što su direktive?

Direktive su prilagođeni kodovi koje Angular koristi za izmjenu ponašanja ili izgleda HTML elementa. Možete koristiti direktive za dodavanje slušatelja događaja, promjenu DOM-a ili prikazivanje ili skrivanje elemenata.

Postoje dvije vrste ugrađene direktive u Angularu, strukturne i atributne. Strukturne direktive mijenjaju strukturu DOM-a, dok direktive atributa mijenjaju izgled ili ponašanje elementa. Direktive su moćan način za proširenje funkcionalnosti Angular komponenti.

Prednosti direktiva

Evo nekih od prednosti korištenja direktiva u Angularu:

• Ponovno korištenje: Možete koristiti direktive u više komponenti, štedeći vrijeme i trud.
instagram viewer
• Proširljivost: Možete proširiti direktive za dodavanje novih funkcija, čineći vaše komponente moćnijima.
• Fleksibilnost: Korištenjem direktiva, možete modificirati ponašanje ili izgled elementa na različite načine, dajući vam puno fleksibilnosti pri izradi vaših aplikacija.

Postavljanje vaše Angular aplikacije

Za postavljanje Angular aplikacije, instalirajte Angular CLI pokretanjem sljedećeg koda na vašem terminalu:

npm install -g @angular/cli

Nakon instaliranja Angular CLI-ja, izradite Angular projekt pokretanjem sljedeće naredbe:

ng new custom-directives-app

Pokretanje gornje naredbe stvorit će Angular projekt pod nazivom aplikacija prilagođenih direktiva.

Stvaranje prilagođene direktive

Sada imate Angular projekt i možete početi stvarati svoje prilagođene direktive. Stvorite TypeScript datoteku i definirajte klasu ukrašenu s @Direktiva dekorater.

The @Direktiva dekorater je TypeScript dekorater koji se koristi za stvaranje prilagođenih direktiva. Sada stvorite a istaknuti.direktiva.ts datoteka u src/aplikacija imenik. U ovoj datoteci izradit ćete prilagođenu direktivu istaknuti.

Na primjer:

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

Gornji blok koda uvozi Direktiva dekorater iz @kutna/jezgra modul. The @Direktiva dekorater dekorira HighlightDirective razreda. Uzima objekt kao argument s a selektor vlasništvo.

U ovom slučaju, vi postavite selektor vlasništvo na [myHighlight] što znači da ovu direktivu možete primijeniti na svoje predloške dodavanjem myHighlight atribut elementu.

Evo primjera kako koristiti direktivu u svojim predlošcima:

Some text</p>
</main>

Dodavanje ponašanja Direktivi

Sada ste uspješno izradili direktivu. Sljedeći korak je dodavanje ponašanja direktivi tako da može manipulirati DOM-om. Trebat će vam ElementRef iz @angular/core za dodavanje ponašanja direktivi.

ElementRef ćete ubaciti u konstruktor direktive. ElementRef je omotač izvornog elementa unutar prikaza.

Evo primjera kako naredbi dodajete ponašanje:

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

U ovom primjeru, konstruktor od HighlightDirective klasa uzima ElementRef parametar, koji Angular automatski ubacuje. ElementRef omogućuje pristup temeljnom DOM elementu.

Korištenje this.element.nativeElement svojstvu, pristupate izvornom DOM elementu element parametar. Zatim postavite boju pozadine komponente na svijetlo plava koristiti stil vlasništvo. To znači da koji god element primijenite myHighlight direktiva za imat će svijetloplavu pozadinu.

Da bi direktiva bila funkcionalna, uvezite je i deklarirajte u app.module.ts datoteka.

Na primjer:

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

Sada možete primijeniti direktivu myHighlight na elemente u vašim Angular komponentama.

Some text</p>
</main>

Pokrenite svoju aplikaciju na razvojnom poslužitelju da testirate je li direktiva funkcionalna. To možete učiniti pokretanjem sljedeće naredbe na vašem terminalu:

ng serve

Nakon pokretanja naredbe idite na http://localhost: 4200/ na vašem web pregledniku i vidjet ćete sučelje koje izgleda kao na slici ispod.

Angular ugrađene direktive prihvaćaju vrijednosti za promjenu izgleda elementa, ali prilagođena direktiva myHighlight ne. Možete konfigurirati direktivu da prihvati vrijednost koju će koristiti za dinamičko postavljanje boje pozadine predloška.

Da biste to učinili, zamijenite kôd u istaknuti.direktiva.ts datoteka s ovim:

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

U gornjem bloku koda, HighlightDirective klasa sadrži metodu postavljača tzv myHighlight. Ova metoda zahtijeva a boja parametar tipa string. Metodu postavljača ukrašavate @Ulazni dekorater, koji vam omogućuje da prenesete vrijednost boje u direktivu iz nadređene komponente.

Sada možete odrediti boju pozadine prosljeđivanjem vrijednosti naredbi myHighlight.

Na primjer:

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

Stvaranje prilagođene strukturne direktive

U prethodnim ste odjeljcima naučili kako stvoriti, dodati ponašanja i primijeniti prilagođene direktive atributa na svoj predložak. Direktive atributa mijenjaju izgled DOM elemenata, dok strukturne direktive dodaju, uklanjaju ili premještaju elemente u DOM-u.

Angular pruža dvije strukturne direktive, ngZa i ngIf. Direktiva ngFor prikazuje predložak za svaku stavku u kolekciji (nizu), dok ngIf upravlja uvjetnim iscrtavanjem.

U ovom odjeljku izradit ćete prilagođenu strukturnu direktivu koja funkcionira kao ngIf direktiva. Da biste to učinili, stvorite a uvjet.direktiva.ts datoteka.

u uvjet.direktiva.ts datoteku, napišite ovaj kod:

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

Ovaj blok koda omogućuje vam uvjetno prikazivanje elemenata primjenom stanje direktiva elementu i prosljeđivanje booleove vrijednosti iz nadređene komponente.

U konstruktoru ConditionDirective klase, ubacujete instancu od TemplateRef i ViewContainerRef. TemplateRef predstavlja predložak povezan s direktivom, a ViewContainerRef predstavlja spremnik u kojem aplikacija prikazuje prikaze.

Metoda postavljača klase ConditionDirective koristi if else naredbu za provjeru parametra arg. Direktiva stvara ugrađeni prikaz pomoću danog predloška ako je parametar istinit. The createEmbeddedView metoda klase ViewContainerRef stvara i prikazuje prikaz u DOM-u.

Ako je parametar lažno, direktiva briše spremnik prikaza pomoću čisto metoda klase ViewContainerRef. Ovo uklanja sve prethodno prikazane prikaze iz DOM-a.

Nakon što stvorite direktivu, registrirajte je u svom projektu uvozom i deklaracijom u app.module.ts datoteka. Nakon što to učinite, možete početi koristiti direktivu u svojim predlošcima.

Evo primjera kako ga koristiti u svojim predlošcima:

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

Sada možete stvarati prilagođene direktive

Prilagođene direktive u Angularu pružaju moćan način za manipuliranje DOM-om i dodavanje dinamičkog ponašanja vašim predlošcima. Naučili ste kako stvoriti i primijeniti prilagođene atribute i strukturne direktive u vašim Angular aplikacijama. Razumijevanjem kako stvoriti i koristiti prilagođene direktive, možete u potpunosti iskoristiti mogućnosti Angulara.