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.
- Attribut-Direktiven
- Strukturelle Richtlinien
- 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 isBlue
Variablen wahr ist. Wenn der Wert der isBlue
Variablen 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 show
Variablen 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 @Component
Dekorator durch den @Directive
Dekorator 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.ts
Datei im src/app
Ordner 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 Directive
und ElementRef
aus Angular Core. Das Directive
bietet die Funktionalität des @Directive
Dekorateurs, in dem wir seinen Eigenschaftswähler bereitstellen, appHighLight
damit wir diesen Selektor überall in der Anwendung verwenden können. Wir importieren auch das, ElementRef
was für den Zugriff auf das DOM-Element verantwortlich ist.
Damit die appHighlight
Direktive funktioniert, müssen wir unsere Direktive dem Deklarationsarray in der app.module.ts
Datei 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 appHightlight
Direktive in die hinzu, app.component.html
aber 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 *appNot
Richtlinie umsetzen, die genau gegenüber funktioniert *ngIf
.
Erstellen Sie nun eine app-not.directive.ts
Datei im src/app
Ordner 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 ViewContainerRef
aus@angular/core.
Directive
bietet die gleiche Funktionalität für den @Directive
Dekorateur. Der Input
Dekorateur dient zur Kommunikation zwischen den beiden Komponenten. Es sendet Daten von einer Komponente zur anderen mithilfe der Eigenschaftsbindung.
TemplateRef
stellt die eingebettete Vorlage dar, mit der die eingebetteten Ansichten instanziiert werden. Diese eingebetteten Ansichten sind mit der Vorlage verknüpft, die gerendert werden soll.
ViewContainerRef
ist 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 appNot
Direktive funktioniert, müssen wir unsere Direktive zum Deklarationsarray in der app.module.ts
Datei 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 appNot
Direktive in die hinzu, app.component.html
aber Sie können sie überall in der Anwendung verwenden.
True
False
Die *appNot
Direktive ist so konzipiert, dass das Vorlagenelement an das DOM angehängt wird, wenn der *appNot
Wert false
genau gegenüber der *ngIf
Direktive 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.