Einführung und Verwendung der Angular-Pipeline PIPE

Vorwort

PIPE, übersetzt als Pipeline. Angular Pipes sind eine Möglichkeit, Transformationen von Anzeigewerten zu schreiben, die in HTML-Komponenten deklariert werden können. Angular-Pipes wurden in AngularJS früher Filter genannt und werden seit Angular 2 nun Pipes genannt. Eine Pipeline verwendet Daten als Eingabe und wandelt sie in die gewünschte Ausgabe um.

Angular Pipes akzeptiert als Eingabe ganze Zahlen, Zeichenfolgen, Arrays und Datumsangaben, die durch | getrennt sind, konvertiert sie dann in das erforderliche Format und zeigt sie im Browser an. In Interpolationsausdrücken können Sie Pipes definieren und diese nach Bedarf verwenden. Es gibt viele Arten von Pipes, die Sie in einer Angular-Anwendung verwenden können.

Eingebaute Rohrleitung

• Zeichenfolge -> Zeichenfolge
  • GroßbuchstabenPipe
  • KleinbuchstabenPipe
  • TitelFallRohr
• Zahl -> Zeichenfolge
  • Dezimalrohr
  • ProzentRohr
  • Währungsrohr
• Objekt -> Zeichenfolge
  • JsonPipe
  • DatePipe
• Werkzeuge
  • Rohrscheibe
  • AsyncPipe
  • I18nPluralPipe
  • I18nSelectPipe

Anwendung

Großbuchstabenkonvertierung

<div>
  <p ngNonBindable>{{ 'Angular' | Großbuchstaben }}</p>
  <p>{{ 'Angular' | Großbuchstaben }}</p> <!-- Ausgabe: ANGULAR -->
</div>

Datumsformatierung

<div>
  <p ngNonBindable>{{ heute | Datum: 'shortTime' }}</p>
  <p>{{ today | date: 'shortTime' }}</p> <!-- Ausgabe: Basierend auf der aktuellen Zeit, Ausgabeformat: 10:40 Uhr -->
</div>

Numerische Formatierung

<div>
  <p ngNonBindable>{{ 3.14159265 | Nummer: '1.4-4' }}</p>
  <p>{{ 3.14159265 | Zahl: '1.4-4' }}</p> <!-- Ausgabe: 3.1416 -->
</div>

JavaScript-Objektserialisierung

<div>
  <p ngNonBindable>{{ { name: 'semlinker' } | json }}</p>
  <p>{{ { name: 'semlinker' } | json }}</p> <!-- Ausgabe: { "name": "semlinker" } -->
</div>

Pipeline-Parameter

Eine Pipeline kann eine beliebige Anzahl Parameter akzeptieren, indem nach dem Pipeline-Namen ein : und der Parameterwert angehängt werden. Beispiel: Zahl: „1.4-4“. Wenn Sie mehrere Parameter übergeben müssen, trennen Sie diese durch Doppelpunkte. Die konkreten Beispiele lauten wie folgt:

<div>
  <p ngNonBindable>{{ 'semlinker' | slice:0:3 }}</p>
  <p>{{ 'semlinker' | slice:0:3 }}</p> <!-- Ausgabe: sem -->
</div>

Rohrleitungskette

<div>
  <p ngNonBindable>{{ 'semlinker' | slice:0:3 | Großbuchstaben }}</p>
  <p>{{ 'semlinker' | slice:0:3 | Großbuchstaben }}</p>
</div>

Benutzerdefinierte Pipeline

Im Folgenden werden am Beispiel der in früheren Projekten verwendeten Pipeline die einzelnen Schritte zum Anpassen der Pipeline erläutert:

• Verwenden Sie den @Pipe-Dekorator, um die Metadateninformationen der Pipe zu definieren, z. B. den Namen der Pipe, d. h. das Namensattribut
• Implementieren Sie die in der PipeTransform-Schnittstelle definierte Transform-Methode

Definition

importiere { Pipe, PipeTransform } von "@angular/core";

@Pipe({ name: "formatError" })
Exportklasse FormatErrorPipe implementiert PipeTransform {
    Konstruktor() {}

    transform(Wert: beliebig, Modul: Zeichenfolge) {
        wenn (Wert.Code) {
            Rückgabewert.desc;
        } anders {
            Rückgabewert.Nachricht;
        }
    }
}

verwenden

<div *ngIf="Fehlermeldung">
    <div Klasse="message-box error mb-16" [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
        {{errorMessage.error | formatError:"auth"}}
    </div>
</div>

Zusammenfassen

Dies ist das Ende dieses Artikels über Winkelrohre. Weitere relevante Inhalte zu Winkelrohren finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!