Hoe bouw je aangepaste richtlijnen in Angular

Een van de belangrijkste functies van Angular zijn directives. Angular directives zijn een manier om gedrag toe te voegen aan DOM-elementen. Angular biedt een verscheidenheid aan ingebouwde directives, en je kunt ook aangepaste directives maken in dit robuuste framework.

Wat zijn directives?

Directives in Angular zijn gespecialiseerde codeconstructies die zijn ontworpen om de presentatie en interactiviteit van HTML-elementen op verschillende manieren te beïnvloeden, zoals het wijzigen van het Document Object Model (DOM), het toevoegen van event-handlers of het regelen van de zichtbaarheid. Met deze richtlijnen kunnen ontwikkelaars de gebruikersinterface effectief manipuleren door de gewenste wijzigingen op te geven in de syntaxis van het sjabloon zelf.

Structurele directieven in Angular wijzigen de lay-out van het Document Object Model (DOM), terwijl attribuutrichtlijnen het visuele aspect of de functionaliteit van afzonderlijke elementen binnen de sjabloon beïnvloeden. Deze directives bieden een robuuste manier om de mogelijkheden van Angular-applicaties te vergroten door ontwikkelaars in staat te stellen HTML-markup eenvoudig aan te passen en te manipuleren.

Voordelen van directives

Het gebruik van directives in Angular biedt een aantal voordelen, waaronder verbeterde flexibiliteit en controle over het gedrag van componenten, evenals verbeterde modulariteit en code-organisatie. Door gebruik te maken van directives kunnen ontwikkelaars aangepast gedrag voor componenten creëren dat verder gaat dan eenvoudige HTML-attributen of lifecycle hooks, waardoor een grotere expressiviteit en fijnmazige controle over UI-interacties mogelijk wordt. Bovendien zorgen directives voor een betere inkapseling en scheiding van zorgen binnen de applicatie, wat herbruikbaarheid en onderhoudbaarheid in verschillende delen van het project bevordert. Over het geheel genomen spelen directives een essentiële rol bij het vormgeven van de structuur en functionaliteit van Angular-applicaties, en bieden ze ontwikkelaars krachtige hulpmiddelen om complexe UI’s en gebruikerservaringen efficiënt te bouwen.

Herbruikbaarheid is een belangrijke eigenschap van directives die het mogelijk maakt ze te gebruiken in meerdere componenten, wat resulteert in verhoogde efficiëntie door het verminderen van redundantie en het bevorderen van consistentie in je hele project.

De uitbreidbaarheid van richtlijnen maakt het mogelijk om nieuwe functionaliteiten toe te voegen aan componenten, waardoor hun mogelijkheden worden vergroot en de algehele prestaties worden verbeterd.

Dankzij de veelzijdigheid van directives kunnen eigenschappen en acties van elementen worden gemanipuleerd en aangepast, waardoor ontwikkelaars veel creatieve vrijheid hebben om hun applicaties effectief te bouwen.

Uw Angular-toepassing opzetten

Om een Angular-project op te zetten, voert u in uw terminal het volgende commando uit om de Angular Command Line Interface (CLI) te installeren:

 npm install -g @angular/cli

Na installatie van de Angular Command Line Interface (CLI) kunt u een Angular-project opzetten met het volgende commando:

 ng new custom-directives-app

Het uitvoeren van de bovengenoemde instructie zal leiden tot het genereren van een Angular-toepassing aangeduid als “custom-directives-app”.

Een aangepaste richtlijn maken

Om aangepaste richtlijnen te maken in een Angular-project, moet je eerst een TypeScript-bestand maken en een klasse aanwijzen die is versierd met de richtlijn-decorator.

De @Directive decorator is een functie van TypeScript die het mogelijk maakt om aangepaste directives te maken. Om deze functionaliteit te implementeren, maken we een highlight.directive.ts bestand in de src/app directory. In dit bestand maken we de aangepaste richtlijn highlight .

Bijvoorbeeld:

 import { Directive } from "@angular/core";

@Directive({
  selector: "[myHighlight]",
})
export class HighlightDirective {
  constructor() {}
}

De geïmporteerde richtlijn is afgeleid van de Angular-kernmodule en wordt versierd met de @Directive decorator, die een argument accepteert dat bestaat uit een objectgeoriënteerde weergave met een selector attribuut.

In dit geval kan door de selector-eigenschap in te stellen op “[myHighlight]” deze richtlijn worden toegepast op sjablonen door het “myHighlight”-attribuut aan een gespecificeerd element te koppelen.

Het opnemen van de richtlijn in de sjabloonstructuur kan als volgt worden bereikt:

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

Gedrag toevoegen aan de richtlijn

Om het Document Object Model (DOM) te manipuleren met behulp van een richtlijn, moet men eerst deze richtlijn creëren en een instantie van de ElementRef uit het @angular/core pakket verkrijgen. Deze referentie dient als middel om gedrag toe te voegen aan elementen binnen het sjabloon.

Om ElementRef te gebruiken in een richtlijn, moet het worden opgenomen in de constructeursfunctie van die richtlijn. ElementRef dient als een inkapseling voor een native element binnen een specifiek gezichtspunt.

Zeker, hier is een illustratie die het proces laat zien van het toevoegen van een gedrag aan een richtlijn in Angular:

 import { Directive, ElementRef } from "@angular/core";

@Directive({
    selector: "[myHighlight]"
})
export class HighlightDirective {
    constructor(private element: ElementRef) {
        this.element.nativeElement.style.backgroundColor = 'lightblue';
    }
}

De constructor van de klasse HighlightDirective accepteert een ElementRef-parameter, die automatisch door Angular wordt geleverd. Deze ElementRef geeft toegang tot het corresponderende DOM-element.

Door gebruik te maken van de this.element.nativeElement eigenschap, kan men toegang krijgen tot het originele DOM element dat wordt vertegenwoordigd door de element parameter. Door vervolgens de style eigenschap te gebruiken, is het mogelijk om een lichtblauwe tint toe te wijzen als achtergrondkleur voor de component in kwestie. Bijgevolg zal elk element waarop de richtlijn myHighlight wordt toegepast een hemelsblauwe achtergrond hebben.

Om de richtlijn operationeel te maken, is het noodzakelijk dat je deze importeert en expliciet aangeeft in het bestand app.module.ts.

Bijvoorbeeld:

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

U kunt nu de myHighlight-richtlijn gebruiken op de samenstellende elementen in uw Angular-componenten.

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

Om de functionaliteit van een specifieke richtlijn binnen een applicatie te evalueren, wordt aanbevolen om de applicatie op de aangewezen ontwikkelserver te implementeren en uit te voeren met behulp van een opdrachtregelinterface. Om dit proces te starten, navigeer je naar de juiste map waar de terminal zich bevindt en voer je het gespecificeerde commando voor uitvoering in. Zo kun je controleren of de richtlijn werkt zoals bedoeld.

 ng serve

Na het uitvoeren van de gegeven instructie, gelieve uw internetbrowser te richten op " http://localhost:4200/ " om toegang te krijgen tot een gebruikersinterface die een opvallende gelijkenis vertoont met de afgebeelde visuele voorstelling hieronder.

Met Angular’s native directives kun je het uiterlijk van een element wijzigen door specifieke waarden te accepteren, maar deze functionaliteit is niet uitgebreid naar aangepaste directives zoals “myHighlight”. Om deze beperking te verhelpen, kan een configuratieoptie worden geïmplementeerd binnen de aangepaste richtlijn die een dynamische wijziging van de achtergrondkleur van het sjabloon mogelijk maakt op basis van de opgegeven waarde.

Om het gedrag van de highlight richtlijn in Angular aan te passen, kan de inhoud van het highlight.directive.ts bestand worden vervangen door de meegeleverde sjabloon. Dit zal resulteren in een andere rendering van HTML-elementen die worden gematched door de selector van de richtlijn.

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

De meegeleverde code demonstreert een implementatie van een HighlightDirective-klasse in Angular, die een setter-methode heeft met de naam ‘myHighlight’. Deze methode accepteert een enkele invoerparameter van het gegevenstype string en is versierd met de decorator Input, waardoor de genoemde kleurwaarde kan worden ontvangen van de overkoepelende component.

Je kunt nu de gewenste achtergrondkleur specificeren voor het element met het attribuut myHighlight door er een waarde voor op te geven.

Bijvoorbeeld:

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

Een aangepaste structuurrichtlijn maken

In eerdere passages werd u geïnstrueerd over het proces van het construeren, imbueren van acties en het implementeren van gepersonaliseerde attribuutrichtlijnen binnen een sjabloon. Attribuutrichtlijnen wijzigen de visuele presentatie van DOM-componenten, terwijl structuurrichtlijnen de samenstelling van elementen binnen het DOM wijzigen door ze toe te voegen, te verwijderen of te verplaatsen.

Angular biedt twee fundamentele structurele directieven, namelijk ngFor en ngIf . De eerste itereert door een array van items en toont een bijbehorende sjabloon voor elk element, terwijl de tweede verantwoordelijk is voor het voorwaardelijk renderen van elementen op basis van specifieke criteria.

In dit segment zullen we een op maat gemaakte structurele richtlijn ontwikkelen die dezelfde functionaliteit heeft als de ngIf richtlijn. Om dit te bereiken, maken we een condition.directive.ts bestand.

Schrijf deze code in het bestand condition.directive.ts:

 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

) {}
}

Dit codefragment maakt de voorwaardelijke tentoonstelling van componenten mogelijk door de toepassing van de “condition” directing op een element, vergezeld van de overdracht van een Booleaanse waarde van het omringende component.

een TemplateRef en een ViewContainerRef . De eerste dient als verwijzing naar de sjabloon die bij de richtlijn hoort, terwijl de tweede de weergavecontext vertegenwoordigt waarbinnen de weergaven van de richtlijnen worden weergegeven.

De ConditionDirective maakt gebruik van een voorwaardelijke expressie, geïmplementeerd door een if-else statement, om de waarde van het ontvangen argument te evalueren. Als deze invoer geldig blijkt, genereert de constructie een ingesloten perspectief door gebruik te maken van de gespecificeerde ontwerpsjabloon met behulp van de createEmbeddedView() methodologie die inherent is aan de ViewContainerRef . Vervolgens zal de renderView() functie geassocieerd met deze containerinstantie de integratie van het nieuw gecreëerde gezichtspunt binnen het Document Object Model (DOM) van de browser orkestreren.

Als niet wordt voldaan aan de gespecificeerde voorwaarde, gebruikt de opdracht de methode clear() van de ViewContainerRef om alle eerdere renderingen binnen de view-container uit het document te verwijderen.

Het opnemen van de richtlijn vereist het importeren en bevestigen van de aanwezigheid ervan in het modulebestand van de toepassing. Als dit eenmaal is gedaan, wordt de richtlijn toegankelijk voor gebruik binnen sjabloonconstructies.

Het opnemen van de extensie in een sjabloon kan worden bereikt door het bijgeleverde codefragment op te nemen, zoals hieronder wordt gedemonstreerd:

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

Nu kunt u aangepaste richtlijnen maken

De aangepaste richtlijnen van Angular bieden een krachtige manier om het Document Object Model (DOM) te beïnvloeden en dynamische functionaliteit in sjabloonstructuren op te nemen. Nadat u vertrouwd bent geraakt met het maken en toepassen van aangepaste attributen en structurele richtlijnen, bent u nu uitgerust om het potentieel van Angular volledig te benutten.