Verwenden und Erstellen von benutzerdefinierten Anweisungen in Angular

Nachdem ich lange mit Angular gespielt hatte, fand ich endlich eine verständliche Erklärung für Angular-Anweisungen. In diesem Artikel werden wir zunächst verstehen, was eine Direktive genau ist und wie sie in Angular verwendet wird. Wir werden auch unsere eigenen benutzerdefinierten Anweisungen erstellen. Worauf warten wir noch? Lassen Sie uns tief eintauchen.

Was ist eine Winkelrichtlinie?

Direktiven sind die Funktionen, die ausgeführt werden, wenn der Angular-Compiler sie findet . Angular Directives verbessern die Fähigkeit von HTML-Elementen, indem sie dem DOM benutzerdefinierte Verhaltensweisen hinzufügen.

Nach dem Kernkonzept werden Angular-Direktiven in drei Kategorien eingeteilt.

  1. Attribut-Direktiven
  2. Strukturelle Richtlinien
  3. Komponenten

Attribut-Direktiven

Attributanweisungen sind für die Manipulation des Erscheinungsbilds und Verhaltens von DOM-Elementen verantwortlich. Wir können Attributanweisungen verwenden, um den Stil von DOM-Elementen zu ändern. Diese Anweisungen werden auch verwendet, um bestimmte DOM-Elemente bedingt auszublenden oder anzuzeigen. Angular bietet viele integrierte Attributanweisungen wie NgStyle , NgClass usw. Wir können auch unsere eigenen benutzerdefinierten Attributanweisungen für unsere gewünschte Funktionalität erstellen.

Strukturelle Richtlinien

Strukturrichtlinien sind für die Änderung der Struktur des DOM verantwortlich. Sie arbeiten, indem sie die Elemente zum DOM hinzufügen oder daraus entfernen, im Gegensatz zu Attributanweisungen, die nur das Erscheinungsbild und Verhalten des Elements ändern.

Sie können leicht zwischen der Struktur- und der Attributrichtlinie unterscheiden, indem Sie sich die Syntax ansehen. Der Name der Strukturrichtlinie beginnt immer mit einem Sternchen (*), während die Attributrichtlinie kein Präfix enthält. Die drei beliebtesten integrierten Strukturrichtlinien, die Angular bereitstellt, sind NgIf , NgFor und NgSwitch .

Komponenten

Komponenten sind Anweisungen mit Vorlagen. Der einzige Unterschied zwischen Komponenten und den beiden anderen Arten von Anweisungen ist die Vorlage. Attribut- und Strukturanweisungen haben keine Vorlagen. Wir können also sagen, dass die Komponente eine sauberere Version der Richtlinie mit einer Vorlage ist, die einfacher zu verwenden ist.

Verwenden von integrierten Winkelanweisungen

In Angular sind viele integrierte Richtlinien verfügbar, die Sie problemlos verwenden können. In diesem Abschnitt werden zwei sehr einfache integrierte Anweisungen verwendet.

Die NgStyle-Direktive ist eine Attribut-Direktive, mit der das Design eines DOM-Elements unter bestimmten Bedingungen geändert wird.

I am an Attribute Directive

Im obigen Codeausschnitt fügen wir einen blauen Hintergrund hinzu, wenn der Wert der isBlueVariablen wahr ist. Wenn der Wert der isBlueVariablen false ist, ist der Hintergrund des obigen Elements rot.

Die NgIf-Direktive ist eine strukturelle Direktive, mit der Elemente unter bestimmten Bedingungen zum DOM hinzugefügt werden.

I am a Structural Directive

Im obigen Codeausschnitt verbleibt der gesamte Absatz im DOM, wenn der Wert der showVariablen wahr ist, andernfalls wird er vom DOM gestartet.

Erstellen einer benutzerdefinierten Attributrichtlinie

Das Erstellen einer benutzerdefinierten Direktive entspricht dem Erstellen einer Angular-Komponente. Um eine benutzerdefinierte Direktive zu erstellen, müssen wir den @ComponentDekorator durch den @DirectiveDekorator ersetzen .

Beginnen wir also mit der Erstellung unserer ersten Direktive für benutzerdefinierte Attribute. In dieser Anweisung werden wir das ausgewählte DOM-Element hervorheben, indem wir die Hintergrundfarbe eines Elements festlegen.

Erstellen Sie eine app-highlight.directive.tsDatei im src/appOrdner und fügen Sie das folgende Codefragment hinzu.

import { Directive, ElementRef } from '@angular/core';
@Directive({
 selector: '[appHighlight]'
})
export class HighlightDirective {
 constructor(private eleRef: ElementRef) {
 eleRef.nativeElement.style.background = 'red';
 }
}

Hier importieren wir Directiveund ElementRefaus Angular Core. Das Directivebietet die Funktionalität des @DirectiveDekorateurs, in dem wir seinen Eigenschaftswähler bereitstellen, appHighLightdamit wir diesen Selektor überall in der Anwendung verwenden können. Wir importieren auch das, ElementRefwas für den Zugriff auf das DOM-Element verantwortlich ist.

Damit die appHighlightDirektive funktioniert, müssen wir unsere Direktive dem Deklarationsarray in der app.module.tsDatei hinzufügen .

import ...;
import { ChangeThemeDirective } from './app-highlight.directive';
@NgModule({
declarations: [
AppComponent,
ChangeThemeDirective
],
imports: [
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Jetzt werden wir unsere neu erstellte benutzerdefinierte Direktive verwenden. Ich füge die appHightlightDirektive in die hinzu, app.component.htmlaber Sie können sie überall in der Anwendung verwenden.

Highlight Me !

Die Ausgabe des obigen Code-Snippets sieht folgendermaßen aus.

Erstellen einer benutzerdefinierten Strukturrichtlinie

Im vorherigen Abschnitt haben wir unsere erste Attributanweisung erstellt. Der gleiche Ansatz wird auch für die Erstellung der Strukturrichtlinie verwendet.

Beginnen wir also mit der Erstellung unserer Strukturrichtlinie. In dieser Richtlinie werden wir die *appNotRichtlinie umsetzen, die genau gegenüber funktioniert *ngIf.

Erstellen Sie nun eine app-not.directive.tsDatei im src/appOrdner und fügen Sie den folgenden Code hinzu.

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({
 selector: '[appNot]'
})
export class AppNotDirective {
constructor(
 private templateRef: TemplateRef,
 private viewContainer: ViewContainerRef) { }
 @Input() set appNot(condition: boolean) {
 if (!condition) {
 this.viewContainer.createEmbeddedView(this.templateRef);
 } else {
 this.viewContainer.clear(); }
 }
}

Wie Sie im obigen Code-Snippet gesehen haben, importieren wir Directive, Input, TemplateRef and ViewContainerRefaus@angular/core.

Directivebietet die gleiche Funktionalität für den @DirectiveDekorateur. Der InputDekorateur dient zur Kommunikation zwischen den beiden Komponenten. Es sendet Daten von einer Komponente zur anderen mithilfe der Eigenschaftsbindung.

TemplateRefstellt die eingebettete Vorlage dar, mit der die eingebetteten Ansichten instanziiert werden. Diese eingebetteten Ansichten sind mit der Vorlage verknüpft, die gerendert werden soll.

ViewContainerRefist ein Container, an den eine oder mehrere Ansichten angehängt werden können. Wir können die createEmbeddedView()Funktion verwenden, um die eingebetteten Vorlagen im Container anzuhängen.

Damit die appNotDirektive funktioniert, müssen wir unsere Direktive zum Deklarationsarray in der app.module.tsDatei hinzufügen .

import ...;
import { AppNotDirective } from './app-not.directive';
@NgModule({
declarations: [
AppComponent,
AppNotDirective
],
imports: [
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Jetzt ist es Zeit, unsere neu geschaffene Strukturrichtlinie zu verwenden.

Ich füge die appNotDirektive in die hinzu, app.component.htmlaber Sie können sie überall in der Anwendung verwenden.

True

False

Die *appNotDirektive ist so konzipiert, dass das Vorlagenelement an das DOM angehängt wird, wenn der *appNotWert falsegenau gegenüber der *ngIfDirektive liegt.

Die Ausgabe des obigen Code-Snippets sieht folgendermaßen aus.

Ich hoffe, dieser Artikel hat die meisten Ihrer Fragen zu Angular-Richtlinien beantwortet. Wenn Sie Fragen oder Zweifel haben, können Sie sich gerne im Kommentarfeld an mich wenden.