Direktiven und Pipes in Angular erstellen

Name: Direktiven und Pipes in Angular erstellen
Author: Michaela Ochnich

Dieses Kapitel behandelt strukturelle Direktiven, Attribut-Direktiven und Pipes. Es werden die eingebauten Direktiven und Pipes von Angular vorgestellt. Außerdem wird gezeigt, wie Sie Ihre eigene Pipe-Klasse mithilfe der CLI sowie einer Struktur- und einer Attributdirektive erstellen können.

Preview the first lesson free — get full access to all 3 lessons.

Demo anfragen Anmelden

Kurs: On-Demand

Diese Lektion wird es dir zeigen So erstellen Sie eine benutzerdefinierte Pipe. In diesem Fall ist ein Rohr, das berechnet und zeigt den Durchschnitt eines Arrays an. Rohre werden in Winkelschablonen verwendet um Daten in ein anderes Format zu ändern bevor sie dem Benutzer angezeigt werden. Angular bietet ein paar verschiedene eingebaute Rohre um die Datenformatierung für gängige Typen zu handhaben wie Achtel, Währung oder Prozentsätze, sowie Gehäuse für Saiten. Manchmal müssen Sie möglicherweise eine benutzerdefinierte Pipe erstellen um wiederholte Datenformatierungen zu handhaben für Ihre speziellen Anwendungsfälle. Die Angular CLI bietet einen Schaltplan um diese benutzerdefinierten Rohre zu erstellen. Also in einem Terminalfenster im App-Verzeichnis, Sie können den Befehl ausführen: ng create pipe, und dann der Name für Ihre Pfeife. Diese Pipe wird also eine Reihe von Zahlen aufnehmen und geben Sie dann den Durchschnitt dieses Arrays aus. Und dieser Befehl generiert zwei verschiedene Dateien: eine für die Pipe-Klasse und eine für die Testdatei. Es ändert auch die Datei app.module um die Pipe zu deklarieren, die Sie gerade generiert haben so kann es in der Anwendung verwendet werden. Öffnen Sie also die generierte Pipe-Klassendatei, und das befindet sich im App-Ordner. Die Datei hat also diesen Pfeifendekorateur hier, und dann der Selektor, der hier in den Metadaten eingestellt ist So wird diese Pipe aus der Vorlage aufgerufen. Dann diese Transformationsmethode, die hier unten definiert ist ist die Methode, die Angular aufrufen wird wenn es auf dieses Rohr trifft. Der erste Parameter, Wert, ist das, was in das Rohr geleitet wird. In diesem Fall wird es das Array von Zahlen sein. Und hier habe ich diesen Typ für den Wert festgelegt. Optionale Parameter können auch definiert werden um zu konfigurieren, wie dieser Wert transformiert wird. Also füge ich für diese Pipe eine Variable namens round hinzu, das ist die Anzahl der Dezimalstellen um den Durchschnitt zu runden. Und ich setze den Standardwert für diesen optionalen Parameter auf zwei. Als Nächstes füge ich den Code zu dieser Methode hinzu das berechnet den Durchschnitt des Arrays. Hier habe ich also eine Variable erstellt, die die Summe der Elemente enthält und initialisiert diese auf null. Und dann jedes Element im Array durchlaufen, es wird den Wert dieses Elements zur Gesamtsumme hinzufügen. Und dann am Ende, es dividiert diese Summe durch die Länge des Wertearrays. Und um diese Funktion zu vervollständigen, Geben Sie einfach den gerundeten Durchschnitt zurück. Jetzt mit der fertigen Custom-Pipe, Ich werde diese Haupt-App-Komponentenklasse öffnen und definieren Sie schnell ein Array von zu verwendenden Zufallszahlen. Und dann in der Vorlage, Ich übergebe dieses Array an die benutzerdefinierte Pipe. Und zum Browser wechseln, Sie können sehen, dass der berechnete Durchschnitt hier angezeigt wird, und es wird auf die standardmäßigen zwei Dezimalstellen gerundet da ich diesen optionalen Parameter nicht übergeben habe. Kehren wir nun zur Vorlage zurück, Ich übergebe diesen optionalen Parameter und hier setze ich das auf vier. Und jetzt zurück zum Browser wechseln, dieser Durchschnitt wird jetzt angezeigt auf vier Nachkommastellen gerundet statt der Standardeinstellung zwei. Das ist also alles für diese Lektion zum Erstellen einer benutzerdefinierten Pipe. Und in der nächsten Lektion, Sie erfahren, wie Sie eine benutzerdefinierte Attributdirektive erstellen.

Mittelstufe Anbieter : Michaela Ochnich 3 Lektionen · 18m auf Arabisch, Deutsch, Englisch, Spanisch, Französisch, Portugiesisch, Chinese

Kursbeschreibung

Was Sie lernen werden

Verstehen Sie, wie Angular-Direktiven und Pipes funktionieren, einschließlich Strukturdirektiven, Attributdirektiven und Pipes
Verwenden Sie die integrierten Direktiven und Pipes von Angular
Erstellen Sie eine benutzerdefinierte Pipe-Klasse mit der Angular CLI
Erstellen Sie eine benutzerdefinierte Strukturdirektive
Erstellen Sie eine benutzerdefinierte Attributdirektive

Wichtige Erkenntnisse

Das Kapitel behandelt Strukturdirektiven, Attributdirektiven und Pipes in Angular.
Angular bietet integrierte Direktiven und Pipes, die dieses Kapitel einführt.
Die Angular CLI kann verwendet werden, um eine benutzerdefinierte Pipe-Klasse zu generieren.
Lernende erstellen während des Kurses ihre eigene Strukturdirektive und Attributdirektive.

Häufig gestellte Fragen

Was behandelt dieser Kurs?

Er behandelt Strukturdirektiven, Attributdirektiven und Pipes, einschließlich der integrierten Direktiven und Pipes von Angular, und zeigt, wie Sie Ihre eigene Pipe-Klasse mit der CLI sowie eine Struktur- und eine Attributdirektive erstellen.

Was werde ich in diesem Kurs erstellen lernen?

Sie lernen, eine benutzerdefinierte Pipe, eine benutzerdefinierte Strukturdirektive und eine benutzerdefinierte Attributdirektive zu erstellen und zu verstehen, wie Angular-Direktiven und Pipes funktionieren.

Welche Lektionen sind enthalten?

Der Kurs enthält drei Lektionen: Creating a Custom Pipe, Creating an Attribute Directive und Creating a Structural Directive.

Welche Fähigkeiten sind mit diesem Kurs verbunden?

Der Kurs bezieht sich auf Angular (Web Framework), Angular CLI, Angular Components, Angular Material, Angular UI und Ng Controller.

Verwendet der Kurs spezifische Werkzeuge, um eine Pipe zu erstellen?

Ja, es zeigt, wie man eine eigene Pipe-Klasse mit der Angular CLI erstellt.