Jak vytvořit vlastní směrnice v Angular

autor:
Tweet
Share
Share
Pin

Směrnice v Angularu: Klíčový prvek pro dynamické aplikace

Jednou ze zásadních vlastností frameworku Angular jsou takzvané směrnice (directives). Tyto směrnice umožňují obohacovat HTML elementy o specifické chování. Angular nabízí sadu zabudovaných směrnic, ale díky jeho flexibilitě můžete si vytvářet i vlastní, zcela na míru vašim potřebám.

Co jsou to směrnice?

Směrnice představují specifický kód, který Angular využívá pro změnu chování nebo vizuální podoby HTML elementů. S jejich pomocí lze například přidávat posluchače událostí, transformovat strukturu DOM (Document Object Model) nebo dynamicky zobrazovat a skrývat elementy.

V Angularu se setkáme se dvěma hlavními typy vestavěných směrnic: strukturální a atributové. Strukturální směrnice se zaměřují na modifikaci samotné struktury DOM, zatímco atributové upravují vzhled nebo chování elementů. Směrnice jsou mocným nástrojem pro rozšíření funkčnosti Angular komponent.

Výhody používání směrnic

Používání směrnic v Angularu přináší řadu výhod:

  • Opakované použití: Jednou vytvořenou směrnici můžete aplikovat v různých komponentách, což šetří váš čas i úsilí.
  • Rozšiřitelnost: Směrnice lze rozšiřovat a přidávat jim nové funkcionality, čímž se zvyšuje výkonnost komponent.
  • Flexibilita: Díky směrnicím máte možnost modifikovat chování a vzhled elementů různými způsoby, což vám dává velkou volnost při vytváření aplikací.

Zprovoznění Angular aplikace

Pro začátek s vývojem v Angularu je potřeba nainstalovat Angular CLI (Command Line Interface). Učiníte tak v terminálu spuštěním následujícího příkazu:

 npm install -g @angular/cli

Po instalaci Angular CLI můžete vytvořit nový Angular projekt pomocí příkazu:

ng new custom-directives-app

Tento příkaz vygeneruje nový projekt s názvem „custom-directives-app“.

Vytvoření vlastní směrnice

Jakmile je projekt vytvořen, můžete se pustit do tvorby vlastní směrnice. Pro tento účel vytvořte nový TypeScript soubor a v něm definujte třídu, kterou označíte dekorátorem @Directive.

Dekorátor @Directive slouží k označení třídy jako vlastní směrnice. Nyní v adresáři src/app vytvořte soubor highlight.directive.ts, ve kterém vytvoříte směrnici pro zvýraznění.

Například takto:

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

Výše uvedený kód importuje dekorátor Directive z modulu @angular/core. Tento dekorátor označuje třídu HighlightDirective jako směrnici. Jako argument přebírá objekt s vlastností selector.

V tomto případě je selector nastaven na [myHighlight], což znamená, že tuto směrnici můžete použít v šablonách přidáním atributu myHighlight k danému elementu.

Zde je příklad použití směrnice v šabloně:

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

Přidání chování směrnice

Směrnice je nyní vytvořena, dalším krokem je přidání kódu, který umožní manipulovat s DOM. K tomu využijeme ElementRef z @angular/core.

ElementRef se vkládá do konstruktoru směrnice. Jedná se o obálku kolem nativního elementu uvnitř pohledu.

Následující příklad ukazuje, jak přidat chování do směrnice:

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

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

Pomocí this.element.nativeElement získáte přístup k nativnímu DOM elementu. Dále pomocí vlastnosti style nastavíte barvu pozadí na světle modrou. To znamená, že jakýkoli element, na který použijete směrnici myHighlight, bude mít světle modré pozadí.

Aby směrnice fungovala, je nutné ji importovat a deklarovat v souboru app.module.ts.

Například takto:

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

Nyní můžete směrnici myHighlight použít na elementy v libovolné Angular komponentě.

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

Pro otestování, zda směrnice funguje, spusťte aplikaci pomocí vývojového serveru. Spustíte jej příkazem v terminálu:

ng serve

Poté v prohlížeči navštivte adresu http://localhost:4200/. Pokud vše proběhlo správně, zobrazí se upravené rozhraní.

Vestavěné směrnice Angularu běžně přijímají hodnoty pro změnu vzhledu elementu. Vlastní směrnice myHighlight zatím žádnou hodnotu nepřijímá. Nyní ji ale můžeme upravit tak, aby mohla přijímat hodnotu, která se použije pro dynamické nastavení barvy pozadí.

Provedeme to tak, že nahradíme kód v souboru highlight.directive.ts následujícím:

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

Ve výše uvedeném kódu obsahuje třída HighlightDirective metodu setter s názvem myHighlight. Tato metoda přijímá parametr color typu string. Metoda je označena dekorátorem @Input, který umožňuje předat hodnotu barvy z nadřazené komponenty do směrnice.

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

Například takto:

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

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

V předchozích částech jsme se naučili vytvářet, přidávat chování a používat vlastní atributové směrnice. Atributové směrnice modifikují vzhled elementů, zatímco strukturální směrnice přidávají, odebírají nebo přesouvají elementy v DOM.

Angular nabízí dvě standardní strukturální směrnice: ngFor a ngIf. Směrnice ngFor renderuje šablonu pro každou položku v kolekci (poli), zatímco ngIf se používá pro podmíněné vykreslování.

V této části vytvoříme vlastní strukturální směrnici, která bude fungovat jako ngIf. Vytvořte soubor condition.directive.ts.

Do souboru condition.directive.ts vložte následující kód:

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

Tento kód umožňuje podmíněné vykreslování elementů. Aplikujete směrnici condition na element a předáte booleovskou hodnotu z nadřazené komponenty.

V konstruktoru třídy ConditionDirective vložíte instanci TemplateRef a ViewContainerRef. TemplateRef představuje šablonu přidruženou ke směrnici a ViewContainerRef představuje kontejner, ve kterém aplikace vykresluje pohledy.

Metoda setter ve třídě ConditionDirective používá příkaz if else pro kontrolu parametru arg. Pokud je parametr pravdivý, směrnice vytvoří vložený pohled pomocí poskytnuté šablony. Metoda createEmbeddedView třídy ViewContainerRef vytváří a renderuje pohled v DOM.

Pokud je parametr false, směrnice vymaže kontejner zobrazení pomocí metody clear třídy ViewContainerRef. Tím se z DOM odstraní všechny dříve vykreslené pohledy.

Po vytvoření směrnice ji musíte zaregistrovat v projektu – importujte a deklarujte ji v app.module.ts. Poté můžete začít používat tuto směrnici v šablonách.

Následuje příklad použití v šabloně:

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

Nyní můžete tvořit vlastní směrnice

Vlastní směrnice v Angularu jsou mocným nástrojem pro manipulaci s DOM a přidávání dynamického chování do šablon. Naučili jste se vytvářet a používat vlastní atributové i strukturální směrnice. Pochopením principů tvorby a použití vlastních směrnic můžete naplno využít potenciál frameworku Angular.