Ako vytvoriť vlastné smernice v Angular

Jednou z kľúčových vlastností Angularu sú smernice. Uhlové direktívy predstavujú spôsob, ako pridať správanie k prvkom DOM. Angular poskytuje množstvo vstavaných direktív a v tomto robustnom rámci môžete vytvárať aj vlastné direktívy.

Čo sú smernice?

Direktívy sú vlastné kódy, ktoré Angular používa na úpravu správania alebo vzhľadu HTML elementu. Direktívy môžete použiť na pridanie poslucháčov udalostí, zmenu modelu DOM alebo zobrazenie či skrytie prvkov.

Existujú dva typy vstavané smernice v Angular, štrukturálne a atribútové. Štrukturálne direktívy menia štruktúru DOM, zatiaľ čo atribútové direktívy menia vzhľad alebo správanie prvku. Direktívy sú účinným spôsobom rozšírenia funkčnosti komponentov Angular.

Výhody smerníc

Tu sú niektoré z výhod používania direktív v Angular:

• Opätovná použiteľnosť: Direktívy môžete použiť vo viacerých komponentoch, čo vám ušetrí čas a námahu.
instagram viewer
• Rozšíriteľnosť: Direktívy môžete rozšíriť a pridať nové funkcie, vďaka čomu budú vaše komponenty výkonnejšie.
• Flexibilita: Pomocou príkazov môžete rôznymi spôsobmi upravovať správanie alebo vzhľad prvku, čo vám dáva veľkú flexibilitu pri vytváraní aplikácií.

Nastavenie vašej uhlovej aplikácie

Ak chcete nastaviť aplikáciu Angular, nainštalujte Angular CLI spustením nasledujúceho kódu vo svojom termináli:

npm install -g @angular/cli

Po inštalácii Angular CLI vytvorte projekt Angular spustením nasledujúceho príkazu:

ng new custom-directives-app

Spustenie vyššie uvedeného príkazu vytvorí projekt Angular s názvom custom-directives-app.

Vytvorenie colnej smernice

Teraz máte projekt Angular a môžete začať vytvárať vlastné smernice. Vytvorte súbor TypeScript a definujte triedu zdobenú @Directive dekoratér.

The @Directive decorator je dekorátor TypeScript používaný na vytváranie vlastných direktív. Teraz vytvorte a zdôrazniť.smernicu.ts súbor v src/aplikácia adresár. V tomto súbore vytvoríte vlastnú direktívu Zlatý klinec.

Napríklad:

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

Vyššie uvedený blok kódu importuje súbor smernice dekoratér z @angular/core modul. The @Directive dekoratér zdobí HighlightDirective trieda. Objekt berie ako argument s a selektor nehnuteľnosť.

V tomto prípade nastavíte selektor majetok do [myHighlight] čo znamená, že túto direktívu môžete použiť na svoje šablóny pridaním myHighlight atribút prvku.

Tu je príklad, ako použiť smernicu vo vašich šablónach:

Some text</p>
</main>

Doplnenie smernice o správaní

Teraz ste úspešne vytvorili smernicu. Ďalším krokom je pridanie správania do direktívy, aby mohla manipulovať s DOM. Budete potrebovať ElementRef z @angular/core na pridanie správania do smernice.

ElementRef vložíte do konštruktora smernice. ElementRef je obal okolo natívneho prvku vo vnútri zobrazenia.

Tu je príklad, ako pridáte správanie do smernice:

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

V tomto príklade je konštruktor HighlightDirective trieda preberá parameter ElementRef, ktorý Angular automaticky vkladá. ElementRef poskytuje prístup k základnému prvku DOM.

Použitím this.element.nativeElement získate prístup k natívnemu prvku DOM súboru element parameter. Potom nastavte farbu pozadia komponentu na svetlo modrá pomocou štýl nehnuteľnosť. To znamená, že akýkoľvek prvok použijete myHighlight bude mať svetlomodré pozadie.

Aby bola smernica funkčná, uistite sa, že ju importujete a deklarujete v app.module.ts súbor.

Napríklad:

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

Teraz môžete použiť direktívu myHighlight na prvky vo vašich komponentoch Angular.

Some text</p>
</main>

Spustite svoju aplikáciu na vývojovom serveri a otestujte, či je direktíva funkčná. Môžete to urobiť spustením nasledujúceho príkazu v termináli:

ng serve

Po spustení príkazu prejdite na http://localhost: 4200/ vo webovom prehliadači a uvidíte rozhranie, ktoré vyzerá ako na obrázku nižšie.

Uhlové vstavané direktívy akceptujú hodnoty na zmenu vzhľadu prvku, ale vlastnú direktívu myHighlight nie. Direktívu môžete nakonfigurovať tak, aby akceptovala hodnotu, ktorú použije na dynamické nastavenie farby pozadia šablóny.

Ak to chcete urobiť, nahraďte kód v zdôrazniť.smernicu.ts súbor s týmto:

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

Vo vyššie uvedenom bloku kódu je HighlightDirective trieda obsahuje metódu setter tzv myHighlight. Táto metóda trvá a farba parameter typu string. Metódu setra ozdobíte pomocou @Vstup dekoratér, ktorý umožňuje odovzdať hodnotu farby do smernice z nadradeného komponentu.

Teraz môžete určiť farbu pozadia odovzdaním hodnoty do direktívy myHighlight.

Napríklad:

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

Vytvorenie vlastnej štrukturálnej smernice

V predchádzajúcich častiach ste sa naučili, ako vytvoriť, pridať správanie a aplikovať príkazy vlastných atribútov na vašu šablónu. Direktívy atribútov menia vzhľad prvkov DOM, zatiaľ čo štrukturálne smernice pridávajú, odstraňujú alebo presúvajú prvky v DOM.

Angular poskytuje dve štrukturálne smernice, ngFor a ngIf. Smernica ngFor vykreslí šablónu pre každú položku v kolekcii (pole), zatiaľ čo ngIf spracováva podmienené vykresľovanie.

V tejto časti vytvoríte vlastnú štrukturálnu direktívu, ktorá funguje ako ngIf smernice. Ak to chcete urobiť, vytvorte a podmienka.smernica.ts súbor.

V podmienka.smernica.ts súbor, napíšte tento kód:

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

Tento blok kódu vám umožňuje podmienene vykresľovať prvky použitím stave direktívu prvku a odovzdanie boolovskej hodnoty z nadradeného komponentu.

V konštruktérovi Smernica o podmienkach triedy, vložíte inštanciu TemplateRef a ViewContainerRef. TemplateRef predstavuje šablónu spojenú s direktívou a ViewContainerRef predstavuje kontajner, v ktorom aplikácia vykresľuje zobrazenia.

Metóda nastavenia triedy ConditionDirective používa na kontrolu parametra arg príkaz if else. Direktíva vytvorí vložené zobrazenie pomocou poskytnutej šablóny, ak je parameter pravdivý. The createEmbeddedView metóda triedy ViewContainerRef vytvorí a vykreslí pohľad v DOM.

Ak je parameter falošný, smernica vymaže kontajner zobrazenia pomocou jasný metóda triedy ViewContainerRef. Týmto sa z DOM odstránia všetky predtým vykreslené zobrazenia.

Po vytvorení smernice ju zaregistrujte vo svojom projekte tak, že ju importujete a deklarujete v app.module.ts súbor. Potom môžete začať používať smernicu vo svojich šablónach.

Tu je príklad, ako ho použiť vo svojich šablónach:

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

Teraz môžete vytvárať vlastné smernice

Vlastné direktívy v Angular poskytujú účinný spôsob, ako manipulovať s DOM a pridať dynamické správanie do vašich šablón. Naučili ste sa vytvárať a aplikovať vlastné atribúty a štrukturálne smernice vo vašich Angular aplikáciách. Pochopením toho, ako vytvárať a používať vlastné direktívy, môžete naplno využiť možnosti Angularu.