Aangepaste richtlijnen bouwen in Angular

Een van de belangrijkste kenmerken van Angular zijn richtlijnen. Hoekige richtlijnen zijn een manier om gedrag aan DOM-elementen toe te voegen. Angular biedt een verscheidenheid aan ingebouwde richtlijnen, en u kunt ook aangepaste richtlijnen maken in dit robuuste raamwerk.

Wat zijn richtlijnen?

Richtlijnen zijn aangepaste codes die Angular gebruikt om het gedrag of de weergave van een HTML-element te wijzigen. U kunt richtlijnen gebruiken om gebeurtenislisteners toe te voegen, de DOM te wijzigen of elementen weer te geven of te verbergen.

Er zijn twee soorten ingebouwde richtlijnen in Angular, structureel en attribuut. Structurele richtlijnen veranderen de structuur van de DOM, terwijl attribuutrichtlijnen het uiterlijk of gedrag van een element veranderen. Richtlijnen zijn een krachtige manier om de functionaliteit van Angular-componenten uit te breiden.

Voordelen van richtlijnen

Hier zijn enkele voordelen van het gebruik van richtlijnen in Angular:

• Herbruikbaarheid: U kunt richtlijnen in meerdere componenten gebruiken, waardoor u tijd en moeite bespaart.
• Uitbreidbaarheid: u kunt richtlijnen uitbreiden om nieuwe functionaliteit toe te voegen, waardoor uw componenten krachtiger worden.
• Flexibiliteit: Met behulp van richtlijnen kunt u het gedrag of de weergave van een element op verschillende manieren wijzigen, waardoor u veel flexibiliteit krijgt bij het bouwen van uw toepassingen.

Uw Angular-applicatie instellen

Om een ​​Angular-applicatie in te stellen, installeert u de Angular CLI door de volgende code in uw terminal uit te voeren:

npm install -g @angular/cli

Nadat u de Angular CLI hebt geïnstalleerd, maakt u een Angular-project door de volgende opdracht uit te voeren:

ng new custom-directives-app

Als u de bovenstaande opdracht uitvoert, wordt een Angular-project gemaakt met de naam aangepaste richtlijnen-app.

Een aangepaste richtlijn maken

Nu hebt u een Angular-project en kunt u beginnen met het maken van uw aangepaste richtlijnen. Maak een TypeScript-bestand en definieer een klasse die is versierd met de @Richtlijn decorateur.

De @Richtlijn decorateur is een TypeScript-decorateur die wordt gebruikt om aangepaste richtlijnen te maken. Maak nu een highlight.richtlijn.ts bestand in de src/app map. In dit bestand maakt u de aangepaste richtlijn hoogtepunt.

Bijvoorbeeld:

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

Het bovenstaande codeblok importeert de Richtlijn decorateur uit de @hoekig/kern module. De @Richtlijn decorateur versiert de Markeer Richtlijn klas. Er is een object nodig als argument met a keuzeschakelaar eigendom.

In dit geval stelt u de keuzeschakelaar eigendom aan [mijnhoogtepunt] wat betekent dat u deze richtlijn op uw sjablonen kunt toepassen door de mijnhoogtepunt toeschrijven aan een element.

Hier is een voorbeeld van hoe u de richtlijn in uw sjablonen kunt gebruiken:

Some text</p>
</main>

Gedrag aan de richtlijn toevoegen

Nu hebt u met succes een richtlijn gemaakt. De volgende stap is het toevoegen van gedrag aan de richtlijn, zodat deze de DOM kan manipuleren. Je hebt de nodig ElementRef van @angular/core om gedrag aan een richtlijn toe te voegen.

U injecteert ElementRef in de constructor van de richtlijn. ElementRef is een wrapper rond een eigen element in een weergave.

Hier is een voorbeeld van hoe u gedrag aan een richtlijn toevoegt:

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

In dit voorbeeld is de constructor van de Markeer Richtlijn class neemt een ElementRef-parameter, die Angular automatisch injecteert. De ElementRef biedt toegang tot het onderliggende DOM-element.

Gebruik makend van dit.element.nativeElement eigenschap, krijgt u toegang tot het oorspronkelijke DOM-element van het element parameter. Vervolgens stelt u de achtergrondkleur van het onderdeel in lichtblauw de... gebruiken stijl eigendom. Dit betekent dat welk element u ook toepast mijnhoogtepunt richtlijn zal een lichtblauwe achtergrond hebben.

Om de richtlijn functioneel te maken, moet u ervoor zorgen dat u deze importeert en declareert in de app.module.ts bestand.

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

Nu kunt u de myHighlight-richtlijn op de elementen toepassen in uw Angular-componenten.

Some text</p>
</main>

Voer uw toepassing uit op de ontwikkelingsserver om te testen of de richtlijn functioneel is. U kunt dit doen door de volgende opdracht in uw terminal uit te voeren:

ng serve

Nadat u de opdracht hebt uitgevoerd, navigeert u naar http://localhost: 4200/ in uw webbrowser en u ziet een interface die lijkt op de onderstaande afbeelding.

Hoekige ingebouwde richtlijnen accepteren waarden om het uiterlijk van het element te veranderen, maar de aangepaste richtlijn mijnhoogtepunt doet niet. U kunt de richtlijn zo configureren dat deze een waarde accepteert die wordt gebruikt om de achtergrondkleur van de sjabloon dynamisch in te stellen.

Om dit te doen, vervangt u de code in het highlight.richtlijn.ts bestand met dit:

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

In het bovenstaande codeblok wordt de Markeer Richtlijn klasse bevat een settermethode genaamd mijnhoogtepunt. Deze methode duurt a kleur parameter van het type tekenreeks. Je versiert de settermethode met de @Invoer decorateur, waardoor u de kleurwaarde vanuit de bovenliggende component kunt doorgeven aan de richtlijn.

Nu kunt u de achtergrondkleur bepalen door een waarde door te geven aan de myHighlight-richtlijn.

Bijvoorbeeld:

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

Het creëren van een aangepaste structurele richtlijn

In de voorgaande secties hebt u geleerd hoe u aangepaste attribuutrichtlijnen kunt maken, toevoegen en toepassen op uw sjabloon. Attribuutrichtlijnen veranderen het uiterlijk van DOM-elementen, terwijl structurele richtlijnen elementen in DOM toevoegen, verwijderen of verplaatsen.

Angular biedt twee structurele richtlijnen, ngVoor En ngAls. De ngFor-richtlijn geeft een sjabloon weer voor elk item in een verzameling (array), terwijl de ngAls verzorgt de voorwaardelijke weergave.

In deze sectie maakt u een aangepaste structurele richtlijn die functioneert als de ngAls richtlijn. Om dit te doen, maakt u een voorwaarde.richtlijn.ts bestand.

In de voorwaarde.richtlijn.ts bestand, schrijf deze code:

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

Met dit codeblok kunt u elementen voorwaardelijk weergeven door de voorwaarde richtlijn naar een element en geeft een Booleaanse waarde door van de bovenliggende component.

In de constructeur van de ConditieRichtlijn klasse, injecteer je een exemplaar van SjabloonRef En BekijkContainerRef. De TemplateRef vertegenwoordigt de sjabloon die aan de richtlijn is gekoppeld, en de ViewContainerRef vertegenwoordigt de container waarin de toepassing de weergaven weergeeft.

De klassesettermethode ConditionDirective gebruikt een if else-instructie om de parameter arg te controleren. De richtlijn maakt een ingebedde weergave met behulp van de meegeleverde sjabloon als de parameter waar is. De maakEmbeddedView methode van de klasse ViewContainerRef maakt en rendert de weergave in de DOM.

Als de parameter is vals, wist de richtlijn de weergavecontainer met behulp van de duidelijk methode van de klasse ViewContainerRef. Hiermee worden alle eerder weergegeven weergaven uit de DOM verwijderd.

Nadat u de richtlijn heeft gemaakt, registreert u deze in uw project door deze te importeren en te declareren in de app.module.ts bestand. Nadat u dit heeft gedaan, kunt u de richtlijn in uw sjablonen gaan gebruiken.

Hier is een voorbeeld van hoe u het in uw sjablonen kunt gebruiken:

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

Nu kunt u aangepaste richtlijnen maken

Aangepaste richtlijnen in Angular bieden een krachtige manier om de DOM te manipuleren en dynamisch gedrag aan uw sjablonen toe te voegen. U hebt geleerd hoe u aangepaste attributen en structurele richtlijnen kunt maken en toepassen in uw Angular-toepassingen. Door te begrijpen hoe u aangepaste richtlijnen maakt en gebruikt, kunt u optimaal profiteren van de mogelijkheden van Angular.