Winkelrohre: Ein umfassender Leitfaden

Pipes in Angular sind einfache Funktionen, die zum Transformieren von Daten in Vorlagen verwendet werden, ohne die zugrunde liegenden Daten zu ändern. Pipes nehmen einen Wert auf, verarbeiten ihn und geben eine formatierte oder transformierte Ausgabe zurück. Sie werden häufig zum Formatieren von Datumsangaben, Zahlen, Zeichenfolgen und sogar Arrays oder Objekten verwendet.

Sie ermöglichen es Ihnen, Daten direkt in der Ansicht zu formatieren und in einem besser lesbaren oder relevanteren Format anzuzeigen, ohne das zugrunde liegende Datenmodell zu ändern.

Die Verwendung von Pipes trägt dazu bei, den Code sauber und lesbar zu halten. Anstatt komplexe Logik in die Vorlagen oder Komponenten zu schreiben, können Sie diese Logik in einer Pipe kapseln, die dann in verschiedenen Teilen Ihrer Anwendung wiederverwendet werden kann.
Wenn Sie beispielsweise eine Blog-Plattform entwickeln, auf der Benutzer das Veröffentlichungsdatum von Artikeln sehen können. Daten müssen in einem benutzerfreundlichen Format angezeigt werden, z. B. „31. August 2024“ anstelle des Rohformats „2024–08–31T14:48:00.000Z“. Mit Pipes können Sie Angulars integrierte DatePipe in der Vorlage verwenden, anstatt das Datum in der Komponente manuell zu formatieren, was den Code überladen und die Lesbarkeit beeinträchtigen würde.

<p>Published on: {{ article.publishDate | date:'longDate' }}</p>

Um eine Pipe anzuwenden, verwenden Sie den Pipe Operator (|) innerhalb eines Vorlagenausdrucks, wie im obigen Codebeispiel gezeigt.

Eingebaute Rohre

Angular verfügt über mehrere integrierte Pipes, die allgemeine Aufgaben abdecken (DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, AsyncPipe, JsonPipe, usw.). Wenn Sie wissen, wie Sie diese verwenden, können Sie Ihren Code sauberer und effizienter machen.

Beispiele:

<pre class="brush:php;toolbar:false">{{ user | json }}

Parametrisierte Rohre

Viele Angular-Pipes akzeptieren Parameter, um ihr Verhalten anzupassen.

Um den Parameter anzugeben, folgen Sie dem Pipe-Namen mit einem Doppelpunkt (:) und dem Parameterwert

Einige Pipes akzeptieren mehrere Parameter, die durch zusätzliche Doppelpunkte getrennt sind.

Parameter können optional oder erforderlich sein. Angenommen, Sie verfügen über eine benutzerdefinierte Pipe, die Währungen formatiert und erfordert, dass Sie den Währungstyp als Parameter angeben. Wenn dieser Parameter nicht angegeben wird, kann die Pipe den Wert möglicherweise nicht korrekt formatieren.

<p>The product price is {{ price | customCurrency:'USD' }}</p>

1. DatePipe mit Parametern

<p>Published on: {{ article.publishDate | date:'MMMM d, y, h:mm:ss a' }}</p>

Dadurch wird das Datum als „31. August 2024, 14:48:00 Uhr“ formatiert.

2. WährungPipe mit Parametern

<p>Price: {{ product.price | currency:'EUR':'symbol-narrow':'1.0-0' }}</p>

Dadurch wird der Preis als „1.235 €“ formatiert (auf keine Dezimalstellen gerundet).

Verketten von Rohren

Sie können mehrere Rohre miteinander verketten, um komplexe Transformationen zu erreichen.

<p>{{ article.content | slice:0:100 | uppercase }}</p>

Dadurch werden die ersten 100 Zeichen von article.content zerlegt und in Großbuchstaben umgewandelt.

Kundenspezifische Rohre

Manchmal erfüllen die integrierten Pipes möglicherweise nicht Ihre spezifischen Anforderungen und Sie müssen eine benutzerdefinierte Pipe erstellen, um die spezifische Logik zu verarbeiten. So können Sie es machen.

Beispiel:

Im folgenden Beispiel erstellen wir eine Pipe, die einem Namen wie „Hallo, Alice!“ eine Begrüßung hinzufügt

Führen Sie den folgenden Befehl aus, um eine neue Pipe zu generieren:

ng generate pipe greet

Jetzt ändern wir die Datei „greet.pipe.ts“ im Verzeichnis src/app, um die Pipe-Logik einzuschließen:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'greet',  // This is the name you'll use in the template
  standalone: true,
})
export class GreetPipe implements PipeTransform {
  transform(value: string): string {
    return `Hello, ${value}!`;  // This is the transformation logic
  }
}

Sobald Ihre Pfeife fertig ist, können Sie sie in Ihren Vorlagen verwenden.

<p>{{ 'Alice' | greet }}</p>

Erstellen einer parametrisierten benutzerdefinierten Pipe

Jetzt werden wir die Begrüßung anpassbar machen, sodass Sie „Hallo, Alice!“ sagen können. oder „Willkommen, Alice!“ je nachdem, was Sie in die Leitung leiten.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'greet',  // Same pipe name as before
  standalone: true,
})
export class GreetPipe implements PipeTransform {
  transform(value: string, greeting: string = 'Hello'): string {
    return `${greeting}, ${value}!`;  // Now it uses the greeting passed in
  }
}

Die Transformationsmethode verfügt jetzt über einen zweiten Parameter: Begrüßung. Wenn keine Begrüßung angegeben ist, lautet die Standardeinstellung „Hallo“.

Jetzt können Sie die Begrüßung in Ihren Vorlagen anpassen.

<p>{{ 'Alice' | greet:'Hi' }}</p>
<p>{{ 'Bob' | greet:'Welcome' }}</p>

Reine vs. unreine Pfeifen

1. Reine Pfeifen
Standardmäßig sind alle Winkelrohre rein. Eine reine Pipe wird nur aufgerufen, wenn sich Eingabedaten (wie eine Zahl oder eine Zeichenfolge) oder wenn sich der Verweis auf ein Objekt (wie ein Array oder ein Datum) ändert. Dies macht Pure Pipes effizient und leistungsstark, da die Pipe nicht unnötig läuft.

Wenn Ihre Daten jedoch komplexer sind, beispielsweise ein Array von Elementen, bemerkt Angular möglicherweise keine Änderungen innerhalb des Arrays (z. B. das Hinzufügen eines neuen Elements), da sich der Verweis auf das Array nicht geändert hat.

Sofern es nicht notwendig ist, halten Sie Ihre Rohre rein, um unnötiges erneutes Rendern zu vermeiden und die Leistung aufrechtzuerhalten.

Beispiel:

@Pipe({
  name: "onSale",
  standalone: true,
  pure: true,
})
export class OnSalePipe implements PipeTransform {
  transform(items: Item[]): Item[] {
    return items.filter((item) => item.isOnSale);
  }
}

In Ihrer Vorlage:

<ul>
  <li *ngFor="let item of (items | onSale)">
    {{ item.name }} - {{ item.price | formatPrice }}
  </li>
</ul>

If you add a new item to the items array that’s on sale, you might expect it to show up in the list. But if you simply push the new item into the array, the list might not update because the array reference hasn’t changed.

2. Impure Pipes

An impure pipe, on the other hand, is called every time Angular performs a change detection cycle. However, because they run so often, they can slow down your app.

Example:

@Pipe({
  name: "onSaleImpure",
  standalone: true,
  pure: false,
})
export class OnSaleImpurePipe implements PipeTransform {
  transform(items: Item[]): Item[] {
    return items.filter((item) => item.isOnSale);
  }
}

In your template:

<ul>
  <li *ngFor="let item of (items | onSaleImpure)">
    {{ item.name }} - {{ item.price | formatPrice }}
  </li>
</ul>

Now, when you add a new item, the pipe will notice the change and update the list.

Best Practices for Using Pipes

1. Keep Pipes Simple. Avoid Heavy Computations in Pipes

2. Name Pipes Clearly and Descriptively

3. Keep Pipes Focused on a Single Responsibility

4. Avoid Impure Pipes When Possible

5. Test Custom Pipes Thoroughly

Conclusion

Angular pipes streamline data transformation tasks, making your code more modular, reusable, and maintainable. They help to enforce consistency across the application and improve the readability of your templates, which is crucial for developing scalable and maintainable applications.

Das obige ist der detaillierte Inhalt vonWinkelrohre: Ein umfassender Leitfaden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!