Home-theater-designers
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.
MUO-video van de dag SCROLL OM DOOR TE GAAN MET INHOUD
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]",
})
export class HighlightDirective {
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.
waarom zijn Chrome-downloads zo traag?
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:
<main>
<p myHighlight>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]"
})
export class HighlightDirective {
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.
hoe de luidspreker op de iPhone 6 te repareren
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]
})
export class AppModule { }
Nu kunt u de myHighlight-richtlijn op de elementen toepassen in uw Angular-componenten .
<main>
<p myHighlight>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]"
})
export class HighlightDirective {
@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:
externe harde schijf verschijnt maar heeft geen toegang
<main>
<p myHighlight='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 GIF . De ngFor-richtlijn geeft een sjabloon weer voor elk item in een verzameling (array), terwijl de GIF verzorgt de voorwaardelijke weergave.
In deze sectie maakt u een aangepaste structurele richtlijn die functioneert als de GIF 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]"
})
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
) {}
}
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:
<main>
<p *condition="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.