Kako sestaviti direktive po meri v Angular

Ena ključnih lastnosti Angularja so direktive. Kotne direktive so način za dodajanje vedenja elementom DOM. Angular ponuja različne vgrajene direktive, v tem robustnem ogrodju pa lahko ustvarite tudi direktive po meri.

Kaj so direktive?

Direktive so kode po meri, ki jih Angular uporablja za spreminjanje obnašanja ali videza elementa HTML. Z direktivami lahko dodate poslušalce dogodkov, spremenite DOM ali prikažete ali skrijete elemente.

Obstajata dve vrsti vgrajene direktive v Angular, strukturne in atributne. Strukturne direktive spremenijo strukturo DOM, medtem ko direktive atributov spremenijo videz ali obnašanje elementa. Direktive so močan način za razširitev funkcionalnosti komponent Angular.

Prednosti direktiv

Tukaj je nekaj prednosti uporabe direktiv v Angularju:

• Ponovno uporabnost: Direktive lahko uporabite v več komponentah, s čimer prihranite čas in trud.
instagram viewer
• Razširljivost: Direktive lahko razširite, da dodate nove funkcije, s čimer naredite svoje komponente zmogljivejše.
• Prilagodljivost: Z uporabo direktiv lahko spremenite vedenje ali videz elementa na različne načine, kar vam daje veliko prilagodljivosti pri gradnji vaših aplikacij.

Nastavitev vaše aplikacije Angular

Če želite nastaviti aplikacijo Angular, namestite Angular CLI tako, da v terminalu zaženete naslednjo kodo:

npm install -g @angular/cli

Po namestitvi Angular CLI ustvarite Angular projekt tako, da zaženete naslednji ukaz:

ng new custom-directives-app

Če zaženete zgornji ukaz, boste ustvarili Angular projekt z imenom aplikacija za direktive po meri.

Ustvarjanje direktive po meri

Zdaj imate projekt Angular in lahko začnete ustvarjati svoje direktive po meri. Ustvarite datoteko TypeScript in definirajte razred, okrašen z @Direktiva dekorater.

The @Direktiva dekorater je dekorater TypeScript, ki se uporablja za ustvarjanje direktiv po meri. Zdaj ustvarite a highlight.directive.ts datoteka v src/app imenik. V tej datoteki boste ustvarili direktivo po meri označite.

Na primer:

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

Zgornji blok kode uvozi Direktiva dekorater iz @kotno/jedro modul. The @Direktiva dekorater okrasi HighlightDirective razred. Kot argument vzame predmet z a selektor premoženje.

V tem primeru nastavite selektor premoženje do [myHighlight] kar pomeni, da lahko to direktivo uporabite za svoje predloge tako, da dodate myHighlight atribut elementu.

Tukaj je primer uporabe direktive v vaših predlogah:

Some text</p>
</main>

Dodajanje vedenja v direktivo

Zdaj ste uspešno ustvarili direktivo. Naslednji korak je dodajanje vedenja direktivi, da lahko manipulira z DOM. Potrebovali boste ElementRef iz @angular/core, da dodate vedenje direktivi.

ElementRef boste vbrizgali v konstruktor direktive. ElementRef je ovoj okrog izvornega elementa znotraj pogleda.

Tu je primer, kako direktivi dodate vedenje:

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

V tem primeru je konstruktor HighlightDirective razred sprejme parameter ElementRef, ki ga Angular samodejno vstavi. ElementRef omogoča dostop do osnovnega elementa DOM.

Uporaba this.element.nativeElement dostopate do izvornega elementa DOM za element parameter. Nato nastavite barvo ozadja komponente na svetlo modra uporabljati stil premoženje. To pomeni, da kateri koli element uporabite myHighlight direktiva za bo imela svetlo modro ozadje.

Da bo direktiva delovala, jo uvozite in deklarirajte v app.module.ts mapa.

Na primer:

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

Zdaj lahko uporabite direktivo myHighlight za elemente v vaših komponentah Angular.

Some text</p>
</main>

Zaženite aplikacijo na razvojnem strežniku, da preizkusite, ali direktiva deluje. To lahko storite tako, da v terminalu zaženete naslednji ukaz:

ng serve

Ko zaženete ukaz, se pomaknite do http://localhost: 4200/ v spletnem brskalniku in videli boste vmesnik, ki je podoben spodnji sliki.

Vgrajene direktive Angular sprejemajo vrednosti za spreminjanje videza elementa, vendar direktiva po meri myHighlight ne. Direktivo lahko konfigurirate tako, da sprejme vrednost, ki jo bo uporabila za dinamično nastavitev barve ozadja predloge.

Če želite to narediti, zamenjajte kodo v highlight.directive.ts datoteka s tem:

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

V zgornjem bloku kode je HighlightDirective razred vsebuje nastavljeno metodo, imenovano myHighlight. Ta metoda zahteva a barva parameter vrste niz. Okrasite seter metodo z @Vnos dekorater, ki vam omogoča posredovanje vrednosti barve v direktivo iz nadrejene komponente.

Zdaj lahko določite barvo ozadja tako, da posredujete vrednost direktivi myHighlight.

Na primer:

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

Ustvarjanje strukturne direktive po meri

V prejšnjih razdelkih ste se naučili, kako ustvariti, dodati vedenja in uporabiti direktive atributov po meri za svojo predlogo. Atributne direktive spremenijo videz elementov DOM, medtem ko strukturne direktive dodajo, odstranijo ali premaknejo elemente v DOM.

Angular ponuja dve strukturni direktivi, ngZa in ngIf. Direktiva ngFor upodobi predlogo za vsako postavko v zbirki (matriki), medtem ko ngIf obravnava pogojno upodabljanje.

V tem razdelku boste ustvarili strukturno direktivo po meri, ki deluje kot ngIf direktiva. Če želite to narediti, ustvarite a pogoj.direktiva.ts mapa.

V pogoj.direktiva.ts datoteko, napišite to kodo:

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

Ta blok kode vam omogoča pogojno upodabljanje elementov z uporabo stanje elementu in posredovanje logične vrednosti iz nadrejene komponente.

V konstruktorju ConditionDirective razreda, vstavite primerek TemplateRef in ViewContainerRef. TemplateRef predstavlja predlogo, povezano z direktivo, ViewContainerRef pa vsebnik, kjer aplikacija upodablja poglede.

Metoda nastavitve razreda ConditionDirective uporablja stavek if else za preverjanje parametra arg. Direktiva ustvari vdelan pogled z uporabo predložene predloge, če je parameter resničen. The createEmbeddedView metoda razreda ViewContainerRef ustvari in upodobi pogled v DOM.

Če je parameter lažno, direktiva počisti vsebnik pogleda z uporabo jasno metoda razreda ViewContainerRef. To odstrani vse predhodno upodobljene poglede iz DOM.

Ko ustvarite direktivo, jo registrirajte v svojem projektu tako, da jo uvozite in deklarirate v app.module.ts mapa. Ko to storite, lahko začnete uporabljati direktivo v svojih predlogah.

Tu je primer, kako ga lahko uporabite v svojih predlogah:

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

Zdaj lahko ustvarite direktive po meri

Direktive po meri v Angularju zagotavljajo zmogljiv način za manipulacijo DOM in dodajanje dinamičnega vedenja vašim predlogam. Naučili ste se ustvariti in uporabiti atribute po meri in strukturne direktive v svojih aplikacijah Angular. Če razumete, kako ustvariti in uporabljati direktive po meri, lahko v celoti izkoristite zmogljivosti Angularja.