So erstellen Sie benutzerdefinierte Anweisungen in Angular

Eines der Hauptmerkmale von Angular sind Direktiven. Mit Angular-Direktiven können Sie DOM-Elementen Verhalten hinzufügen. Angular bietet eine Vielzahl integrierter Direktiven, und Sie können in diesem robusten Framework auch benutzerdefinierte Direktiven erstellen.

Was sind Richtlinien?

Direktiven sind benutzerdefinierte Codes, die Angular verwendet, um das Verhalten oder Erscheinungsbild eines HTML-Elements zu ändern. Mit Direktiven können Sie Ereignis-Listener hinzufügen, das DOM ändern oder Elemente ein- oder ausblenden.

Es gibt zwei Arten von integrierte Direktiven in Angular, Struktur und Attribut. Strukturanweisungen ändern die Struktur des DOM, während Attributanweisungen das Erscheinungsbild oder Verhalten eines Elements ändern. Direktiven sind eine leistungsstarke Möglichkeit, die Funktionalität von Angular-Komponenten zu erweitern.

Vorteile von Richtlinien

Hier sind einige der Vorteile der Verwendung von Direktiven in Angular:

• Wiederverwendbarkeit: Sie können Anweisungen in mehreren Komponenten verwenden und so Zeit und Mühe sparen.
• Erweiterbarkeit: Sie können Anweisungen erweitern, um neue Funktionen hinzuzufügen und so Ihre Komponenten leistungsfähiger zu machen.
• Flexibilität: Mithilfe von Direktiven können Sie das Verhalten oder Erscheinungsbild eines Elements auf verschiedene Arten ändern, was Ihnen beim Erstellen Ihrer Anwendungen viel Flexibilität bietet.

Einrichten Ihrer Angular-Anwendung

Um eine Angular-Anwendung einzurichten, installieren Sie die Angular-CLI, indem Sie den folgenden Code in Ihrem Terminal ausführen:

npm install -g @angular/cli

Erstellen Sie nach der Installation der Angular-CLI ein Angular-Projekt, indem Sie den folgenden Befehl ausführen:

ng new custom-directives-app

Wenn Sie den obigen Befehl ausführen, wird ein Angular-Projekt mit dem Namen erstellt benutzerdefinierte-Anweisungen-App.

Erstellen einer benutzerdefinierten Richtlinie

Jetzt haben Sie ein Angular-Projekt und können mit der Erstellung Ihrer benutzerdefinierten Anweisungen beginnen. Erstellen Sie eine TypeScript-Datei und definieren Sie eine mit dem dekorierte Klasse @Richtlinie Dekorateur.

Der @Richtlinie decorator ist ein TypeScript-Dekorator, der zum Erstellen benutzerdefinierter Anweisungen verwendet wird. Erstellen Sie nun eine Highlight.directive.ts Datei in der src/app Verzeichnis. In dieser Datei erstellen Sie die benutzerdefinierte Direktive Markieren.

Zum Beispiel:

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

Der obige Codeblock importiert die Richtlinie Dekorateur aus der @angular/core Modul. Der @Richtlinie Dekorateur schmückt die HighlightDirective Klasse. Es nimmt ein Objekt als Argument mit a Wähler Eigentum.

In diesem Fall legen Sie die fest Wähler Eigentum zu [meinHighlight] Das heißt, Sie können diese Direktive auf Ihre Vorlagen anwenden, indem Sie Folgendes hinzufügen meinHighlight Attribut zu einem Element.

Hier ist ein Beispiel für die Verwendung der Direktive in Ihren Vorlagen:

Some text</p>
</main>

Verhalten zur Richtlinie hinzufügen

Jetzt haben Sie erfolgreich eine Direktive erstellt. Der nächste Schritt besteht darin, der Direktive ein Verhalten hinzuzufügen, damit sie das DOM manipulieren kann. Sie benötigen das ElementRef von @angular/core, um einer Direktive ein Verhalten hinzuzufügen.

Sie werden ElementRef in den Konstruktor der Direktive einfügen. ElementRef ist ein Wrapper um ein natives Element innerhalb einer Ansicht.

Hier ist ein Beispiel dafür, wie Sie einer Direktive ein Verhalten hinzufügen:

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

In diesem Beispiel ist der Konstruktor von HighlightDirective Die Klasse benötigt einen ElementRef-Parameter, den Angular automatisch einfügt. Die ElementRef bietet Zugriff auf das zugrunde liegende DOM-Element.

Benutzen this.element.nativeElement Mit der Eigenschaft greifen Sie auf das native DOM-Element der zu Element Parameter. Anschließend stellen Sie die Hintergrundfarbe der Komponente auf ein hellblau Verwendung der Stil Eigentum. Dies bedeutet, dass jedes Element, das Sie anwenden meinHighlight Die Anweisung to hat einen hellblauen Hintergrund.

Um die Direktive funktionsfähig zu machen, stellen Sie sicher, dass Sie sie importieren und in der deklarieren app.module.ts Datei.

Zum Beispiel:

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

Jetzt können Sie die myHighlight-Direktive auf die Elemente anwenden in Ihren Angular-Komponenten.

Some text</p>
</main>

Führen Sie Ihre Anwendung auf dem Entwicklungsserver aus, um zu testen, ob die Direktive funktioniert. Sie können dies tun, indem Sie den folgenden Befehl in Ihrem Terminal ausführen:

ng serve

Navigieren Sie nach dem Ausführen des Befehls zu http://localhost: 4200/ in Ihrem Webbrowser, und Sie sehen eine Oberfläche, die wie im Bild unten aussieht.

Integrierte Angular-Direktiven akzeptieren Werte, um das Erscheinungsbild von Elementen zu ändern, aber die benutzerdefinierte Direktive meinHighlight nicht. Sie können die Direktive so konfigurieren, dass sie einen Wert akzeptiert, den sie zum dynamischen Festlegen der Hintergrundfarbe der Vorlage verwendet.

Ersetzen Sie dazu den Code im Highlight.directive.ts Datei mit dieser:

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

Im Codeblock oben ist die HighlightDirective Die Klasse enthält eine Setter-Methode namens meinHighlight. Diese Methode dauert a Farbe Parameter vom Typ string. Sie dekorieren die Setter-Methode mit dem @Eingang decorator, sodass Sie den Farbwert von der übergeordneten Komponente an die Direktive übergeben können.

Jetzt können Sie die Hintergrundfarbe bestimmen, indem Sie einen Wert an die myHighlight-Direktive übergeben.

Zum Beispiel:

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

Erstellen einer benutzerdefinierten Strukturrichtlinie

In den vorherigen Abschnitten haben Sie erfahren, wie Sie Verhaltensweisen erstellen, hinzufügen und benutzerdefinierte Attributanweisungen auf Ihre Vorlage anwenden. Attributanweisungen ändern das Erscheinungsbild von DOM-Elementen, während Strukturanweisungen Elemente im DOM hinzufügen, entfernen oder verschieben.

Angular bietet zwei Strukturanweisungen: ngFor Und ngIf. Die ngFor-Direktive rendert eine Vorlage für jedes Element in einer Sammlung (Array), während die ngIf Behandelt das bedingte Rendern.

In diesem Abschnitt erstellen Sie eine benutzerdefinierte Strukturanweisung, die wie die funktioniert ngIf Richtlinie. Erstellen Sie dazu eine condition.directive.ts Datei.

Im condition.directive.ts Datei, schreiben Sie diesen 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 
 ) {}
}

Mit diesem Codeblock können Sie Elemente bedingt rendern, indem Sie Folgendes anwenden Zustand Direktive an ein Element und Übergabe eines booleschen Werts von der übergeordneten Komponente.

Im Konstruktor der Bedingungsrichtlinie Klasse, Sie injizieren eine Instanz von TemplateRef Und ViewContainerRef. Die TemplateRef stellt die mit der Direktive verknüpfte Vorlage dar, und die ViewContainerRef stellt den Container dar, in dem die Anwendung die Ansichten rendert.

Die ConditionDirective-Klassensettermethode verwendet eine if else-Anweisung, um den arg-Parameter zu überprüfen. Die Direktive erstellt eine eingebettete Ansicht mithilfe der bereitgestellten Vorlage, wenn der Parameter wahr ist. Der createEmbeddedView Die Methode der ViewContainerRef-Klasse erstellt und rendert die Ansicht im DOM.

Wenn der Parameter ist FALSCH, löscht die Direktive den Ansichtscontainer mithilfe von klar Methode der ViewContainerRef-Klasse. Dadurch werden alle zuvor gerenderten Ansichten aus dem DOM entfernt.

Nachdem Sie die Direktive erstellt haben, registrieren Sie sie in Ihrem Projekt, indem Sie sie importieren und in der deklarieren app.module.ts Datei. Anschließend können Sie die Direktive in Ihren Vorlagen verwenden.

Hier ist ein Beispiel für die Verwendung in Ihren Vorlagen:

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

Jetzt können Sie benutzerdefinierte Anweisungen erstellen

Benutzerdefinierte Direktiven in Angular bieten eine leistungsstarke Möglichkeit, das DOM zu manipulieren und Ihren Vorlagen dynamisches Verhalten hinzuzufügen. Sie haben gelernt, wie Sie benutzerdefinierte Attribute und Strukturanweisungen in Ihren Angular-Anwendungen erstellen und anwenden. Wenn Sie wissen, wie Sie benutzerdefinierte Anweisungen erstellen und verwenden, können Sie die Möglichkeiten von Angular voll ausschöpfen.