Angular sisältää joukon sisäänrakennettuja direktiivejä, kuten ngIf, ngFor ja ngClass. Voit kuitenkin myös luoda omia mukautettuja direktiivejä käsittelemään sovelluksesi erityisiä tehtäviä. Käydään läpi, kuinka voit rakentaa sellaisen käytännön esimerkin avulla.

Luo mukautettu direktiivi

On hyvä käytäntö järjestää koodisi luomalla erillinen kansio direktiiveille. Kutsutaan sitä nimellä directives.

Tämä komento luo uuden kansion nimeltä directives app-hakemiston sisälle ja lisää uuden direktiivitiedoston sinne:

• highlight-on-complete.directive.ts – sisältää direktiivin logiikan;

• highlight-on-complete.directive.spec.ts – yksikkötestitiedosto (voit poistaa tämän, jos sitä ei tarvita).

Tältä direktiivin perusrakenne näyttää:

Määrittele, mitä direktiivin tulee tehdä

Tämä direktiivi korostaa tehtäväelementin vihreällä, jos se on merkitty valmiiksi. Muussa tapauksessa tyylit poistetaan.

Ilmoittaaksemme Angularille, että tämä luokka on direktiivi, koristellaan se @Directive-merkinnällä:

@Directive({
  selector: '[appHighlightOnComplete]'
})

Valitsin [appHighlightOnComplete] tarkoittaa, että direktiiviä käytetään attribuuttina, ei tunnisteena tai rakenteellisena direktiivinä.

HTML-koodissa sitä käytetään seuraavasti:

<div [appHighlightOnComplete]="task.completed"></div>

Direktiivin reagoiminen muutoksiin

Havaitaksemme completed-syötteen muutokset, toteutamme OnChanges-rajapinnan:

Määritämme myös syöteominaisuuden arvon vastaanottamiseksi komponentista:

Mitä tämä tekee:

• Ilmoittaa Angularille, että arvo toimitetaan templatesta (aikaisemmin välitimme task.complete templatesta);

• Sitoo direktiivin sisäisen completed-ominaisuuden templatesta välitettyyn arvoon;

• Asettaa oletusarvoksi true (joka ylikirjoitetaan, kun todelliset tiedot vastaanotetaan).

Pääsy DOM:iin turvallisesti

Angular käyttää riippuvuuksien injektointia tarjotakseen pääsyn DOM:iin ja renderöintityökaluihin.

Konstruktorissa injektoimme:

ElementRef antaa meille viitteen isäntäelementin DOM-elementtiin. Renderer2 mahdollistaa tyylien ja attribuuttien turvallisen muokkaamisen ilman suoraa DOM-manipulointia.

Reagointi muutoksiin ngOnChanges-metodilla

Toteutetaan nyt päälogiikka ngOnChanges-metodiin, joka suoritetaan aina, kun syötearvo muuttuu.

Täysi toteutus:

ngOnChanges-metodi käynnistyy aina, kun Angular havaitsee muutoksia direktiivin syöteominaisuuksissa.

Tässä tapauksessa se reagoi mallista välitetyn completed-arvon päivityksiin. Jos completed on true, direktiivi lisää elementtiin vihreän reunuksen ja vaaleanvihreän taustan. Jos arvo on false, nämä tyylit poistetaan ja elementti palautuu alkuperäiseen ulkoasuunsa. Tämä tarjoaa visuaalisen merkinnän suoritetuista tehtävistä.

Tämän mukautetun direktiivin avulla voit kapseloida tyylikäyttäytymisen uudelleenkäytettävällä ja selkeällä tavalla. Voit nyt käyttää sitä missä tahansa sovelluksesi elementissä ilman, että joudut toistamaan logiikkaa eri komponenteissa. Tämä on erinomainen esimerkki siitä, miten Angularin direktiivijärjestelmä auttaa kirjoittamaan modulaarisempaa ja helpommin ylläpidettävää koodia.