Jak vytvořit vlastní směrnice v Angular

Jednou z klíčových vlastností Angularu jsou směrnice. Úhlové direktivy představují způsob, jak přidat chování prvkům DOM. Angular poskytuje řadu vestavěných direktiv a v tomto robustním rámci můžete také vytvářet vlastní direktivy.

Co jsou směrnice?

Direktivy jsou vlastní kódy, které Angular používá k úpravě chování nebo vzhledu HTML elementu. Direktivy můžete použít k přidání posluchačů událostí, změně modelu DOM nebo zobrazení či skrytí prvků.

Existují dva typy vestavěné směrnice v Angular, strukturální a atributové. Strukturální direktivy mění strukturu DOM, zatímco atributové direktivy mění vzhled nebo chování prvku. Direktivy jsou účinným způsobem, jak rozšířit funkčnost komponent Angular.

Přínosy směrnic

Zde jsou některé z výhod používání direktiv v Angular:

• Znovupoužitelnost: Direktivy můžete použít ve více komponentách, což vám ušetří čas a námahu.
• Rozšiřitelnost: Direktivy můžete rozšířit a přidat nové funkce, díky nimž budou vaše komponenty výkonnější.
instagram viewer
• Flexibilita: Pomocí direktiv můžete různými způsoby upravit chování nebo vzhled prvku, což vám poskytuje velkou flexibilitu při sestavování aplikací.

Nastavení vaší úhlové aplikace

Chcete-li nastavit aplikaci Angular, nainstalujte Angular CLI spuštěním následujícího kódu ve vašem terminálu:

npm install -g @angular/cli

Po instalaci Angular CLI vytvořte projekt Angular spuštěním následujícího příkazu:

ng new custom-directives-app

Spuštěním příkazu výše vytvoříte projekt Angular s názvem custom-directives-app.

Vytvoření celní směrnice

Nyní máte projekt Angular a můžete začít vytvářet vlastní direktivy. Vytvořte soubor TypeScript a definujte třídu zdobenou @Směrnice dekoratér.

The @Směrnice decorator je dekorátor TypeScript používaný k vytváření vlastních direktiv. Nyní vytvořte a zvýraznění.směrnice.ts soubor v src/aplikace adresář. V tomto souboru vytvoříte vlastní direktivu zvýraznit.

Například:

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

Blok kódu výše importuje soubor Směrnice dekoratér z @angular/core modul. The @Směrnice dekoratér zdobí HighlightDirective třída. Bere objekt jako argument s a volič vlastnictví.

V tomto případě nastavíte volič majetek do [myHighlight] což znamená, že můžete použít tuto direktivu na vaše šablony přidáním myHighlight atribut k prvku.

Zde je příklad, jak použít direktivu ve vašich šablonách:

Some text</p>
</main>

Doplnění směrnice o chování

Nyní jste úspěšně vytvořili směrnici. Dalším krokem je přidání chování do direktivy, aby mohla manipulovat s DOM. Budete potřebovat ElementRef z @angular/core pro přidání chování do směrnice.

ElementRef vložíte do konstruktoru směrnice. ElementRef je obal kolem nativního prvku uvnitř pohledu.

Zde je příklad, jak přidat chování do direktivy:

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

V tomto příkladu konstruktor HighlightDirective class přebírá parametr ElementRef, který Angular automaticky vkládá. ElementRef poskytuje přístup k základnímu prvku DOM.

Použitím this.element.nativeElement získáte přístup k nativnímu prvku DOM souboru živel parametr. Poté nastavte barvu pozadí komponenty na světle modrá za použití styl vlastnictví. To znamená, že jakýkoli prvek použijete myHighlight směrnice na bude mít světle modré pozadí.

Aby byla direktiva funkční, ujistěte se, že ji importujete a deklarujete v app.module.ts soubor.

Napří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{ }

Nyní můžete použít direktivu myHighlight na prvky ve vašich Angular součástech.

Some text</p>
</main>

Spusťte aplikaci na vývojovém serveru a otestujte, zda je direktiva funkční. Můžete to provést spuštěním následujícího příkazu v terminálu:

ng serve

Po spuštění příkazu přejděte na http://localhost: 4200/ ve webovém prohlížeči a uvidíte rozhraní, které vypadá jako na obrázku níže.

Úhlové vestavěné direktivy přijímají hodnoty pro změnu vzhledu prvku, ale vlastní direktivu myHighlight ne. Direktivu můžete nakonfigurovat tak, aby přijímala hodnotu, kterou použije k dynamickému nastavení barvy pozadí šablony.

Chcete-li to provést, nahraďte kód v zvýraznění.směrnice.ts soubor 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) { 
 }
}

Ve výše uvedeném bloku kódu je HighlightDirective třída obsahuje nazvanou metodu setter myHighlight. Tato metoda trvá a barva parametr typu string. Metodu setru ozdobíte pomocí @Vstup dekorátor, který umožňuje předat hodnotu barvy do direktivy z nadřazené komponenty.

Nyní můžete určit barvu pozadí předáním hodnoty direktivě myHighlight.

Například:

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

Vytvoření vlastní strukturální směrnice

V předchozích částech jste se naučili vytvářet, přidávat chování a aplikovat direktivy vlastních atributů na vaši šablonu. Direktivy atributů mění vzhled prvků DOM, zatímco strukturální direktivy přidávají, odebírají nebo přesouvají prvky v DOM.

Angular poskytuje dvě strukturální směrnice, ngFor a ngIf. Směrnice ngFor vykreslí šablonu pro každou položku v kolekci (pole), zatímco ngIf zpracovává podmíněné vykreslování.

V této části vytvoříte vlastní strukturální direktivu, která funguje jako ngIf směrnice. Chcete-li to provést, vytvořte a podmínka.směrnice.ts soubor.

V podmínka.směrnice.ts soubor, napiš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 podmíněně vykreslovat prvky použitím stav direktivu prvku a předání booleovské hodnoty z nadřazené komponenty.

V konstruktoru ConditionDirective třídy, vložíte instanci TemplateRef a ViewContainerRef. TemplateRef představuje šablonu přidruženou k direktivě a ViewContainerRef představuje kontejner, kde aplikace vykresluje pohledy.

Metoda setter třídy ConditionDirective používá ke kontrole parametru arg příkaz if else. Direktiva vytvoří vložený pohled pomocí poskytnuté šablony, pokud je parametr pravdivý. The createEmbeddedView metoda třídy ViewContainerRef vytvoří a vykreslí pohled v DOM.

Pokud je parametr Nepravdivé, direktiva vymaže kontejner zobrazení pomocí Průhledná metoda třídy ViewContainerRef. Tím se z DOM odstraní všechny dříve vykreslené pohledy.

Po vytvoření směrnice ji zaregistrujte ve svém projektu tak, že ji importujete a deklarujete v app.module.ts soubor. Poté můžete začít používat direktivu ve svých šablonách.

Zde je příklad, jak jej použít ve vašich šablonách:

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

Nyní můžete vytvářet vlastní směrnice

Vlastní direktivy v Angular poskytují účinný způsob manipulace s DOM a přidání dynamického chování do vašich šablon. Naučili jste se vytvářet a používat vlastní atributy a strukturální direktivy ve vašich Angular aplikacích. Když pochopíte, jak vytvářet a používat vlastní direktivy, můžete plně využít možnosti Angular.