Tiefes Verständnis von PIPE (Pipeline) in Angular

In angular können Pipes zur Verarbeitung von Eingabedaten verwendet werden, und verschiedene Pipes haben unterschiedliche Funktionen. Wie verwendet man Pipe konkret? Der folgende Artikel führt Sie durch eine ausführliche Untersuchung von PIPE (Pipeline) in Angular und zeigt Ihnen, wie Sie es verwenden.

PIPE, übersetzt als Pipe. Angular Pipes sind eine Möglichkeit, Anzeigewerttransformationen zu schreiben, die in HTML-Komponenten deklariert werden können. Angular Pipes wurden früher in AngularJS als Filter bezeichnet und heißen seit Angular 2 Pipes. Pipes nehmen Daten als Eingabe und wandeln sie in die gewünschte Ausgabe um. PIPE，翻译为管道。Angular 管道是编写可以在HTML组件中声明的显示值转换的方法。Angular 管道之前在 AngularJS 中被称为过滤器，从 Angular 2开始就被称为管道。管道将数据作为输入并将其转换为所需的输出。

Angular Pipes 将整数、字符串、数组和日期作为输入，用| 分隔，然后根据需要转换成格式，并在浏览器中显示出来。在插值表达式中，可以定义管道并根据情况使用它，在 Angular 应用程序中可以使用许多类型的管道。

【相关教程推荐：《angular教程》】

内建管道

• String -> String

  • UpperCasePipe

  • LowerCasePipe

  • TitleCasePipe

• Number -> String

  • DecimalPipe

  • PercentPipe

  • CurrencyPipe

• Object -> String

  • JsonPipe

  • DatePipe

• Tools

  • SlicePipe

  • AsyncPipe

  • I18nPluralPipe

  • I18nSelectPipe

使用方法

大写转换

<div>
  <p ngNonBindable>{{ &#39;Angular&#39; | uppercase }}</p>
  <p>{{ &#39;Angular&#39; | uppercase }}</p> <!-- Output: ANGULAR -->
</div>

日期格式化

<div>
  <p ngNonBindable>{{ today | date: &#39;shortTime&#39; }}</p>
  <p>{{ today | date: &#39;shortTime&#39; }}</p> <!-- Output: 以当前时间为准，输出格式：10:40 AM -->
</div>

数值格式化

<div>
  <p ngNonBindable>{{ 3.14159265 | number: &#39;1.4-4&#39; }}</p>
  <p>{{ 3.14159265 | number: &#39;1.4-4&#39; }}</p> <!-- Output: 3.1416 -->
</div>

JavaScript 对象序列化

<div>
  <p ngNonBindable>{{ { name: &#39;semlinker&#39; } | json }}</p>
  <p>{{ { name: &#39;semlinker&#39; } | json }}</p> <!-- Output: { "name": "semlinker" } -->
</div>

管道参数

管道可以接收任意数量的参数，使用方式是在管道名称后面添加:和参数值。如number: '1.4-4'，若需要传递多个参数则参数之间用冒号隔开，具体示例如下：

<div>
  <p ngNonBindable>{{ &#39;semlinker&#39; | slice:0:3 }}</p>
  <p>{{ &#39;semlinker&#39; | slice:0:3 }}</p> <!-- Output: sem -->
</div>

管道链

可以将多个管道连接在一起，组成管道链对数据进行处理。

<div>
  <p ngNonBindable>{{ &#39;semlinker&#39; | slice:0:3 | uppercase }}</p>
  <p>{{ &#39;semlinker&#39; | slice:0:3 | uppercase }}</p>
</div>

自定义管道

下面以过往项目中使用的管道为示例，讲解自定义管道步骤：

• 使用 @Pipe 装饰器定义 Pipe 的 metadata 信息，如 Pipe 的名称 - 即 name 属性

• 实现 PipeTransform 接口中定义的 transform

  Angular Pipes nimmt Ganzzahlen, Zeichenfolgen, Arrays und Datumsangaben als Eingabe, getrennt durch |, konvertiert sie dann nach Bedarf in Formate und zeigt sie im Browser an. In Interpolationsausdrücken können Sie eine Pipe definieren und je nach Situation verwenden. Es gibt viele Arten von Pipes, die in Angular-Anwendungen verwendet werden können.

【Verwandte Tutorial-Empfehlung: „

Angular Tutorial“】

Eingebaute Pipeline

• String Code > -> Code > -> code > -> <code>String

JsonPipe

DatePipe

Tools🎜

🎜SlicePipe🎜🎜
• 🎜AsyncPipe🎜🎜
• 🎜I18nPluralPipe🎜🎜
• 🎜I18nSelectPipe🎜🎜🎜🎜🎜

  🎜Verwendung🎜

  🎜Kapitalumrechnung🎜🎜

  import { Pipe, PipeTransform } from "@angular/core";
  
  @Pipe({ name: "formatError" })
  export class FormatErrorPipe implements PipeTransform {
      constructor() {}
  
      transform(value: any, module: string) {
          if (value.code) {
              return value.desc;
          } else {
              return value.message;
          }
      }
  }

  🎜Datum Formatierung 🎜🎜

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

  🎜Numerische Formatierung🎜🎜rrreee

  🎜JavaScript-Objektserialisierung🎜🎜rrreee

  🎜Pipeline-Parameter🎜

  🎜Pipelines können eine beliebige Anzahl von Parametern empfangen. Um sie zu verwenden, fügen Sie : und den Parameterwert nach dem Pipe-Namen hinzu. Beispiel: Nummer: '1.4-4'. Wenn mehrere Parameter übergeben werden müssen, sollten die Parameter durch Doppelpunkte getrennt werden. Die spezifischen Beispiele lauten wie folgt: 🎜rrreee

  🎜 Pipe-Kette 🎜

  🎜 kann mehrere Pipes miteinander verbinden, um eine Pipeline-Kette zur Datenverarbeitung zu bilden. 🎜rrreee

  🎜Benutzerdefinierte Pipeline🎜

  🎜Im Folgenden werden in früheren Projekten verwendete Pipelines als Beispiele verwendet, um die Schritte von benutzerdefinierten Pipelines zu erläutern: 🎜
  • 🎜Verwendung Der @Pipe-Dekorator definiert die Metadaten-Informationen von Pipe, wie zum Beispiel den Namen von Pipe – also name code>-Attribut🎜🎜
  • 🎜implementiert die in der PipeTransform-Schnittstelle definierte transform-Methode🎜🎜🎜🎜🎜define🎜🎜rrreee🎜🎜use🎜 🎜rrreee🎜🎜Ende~ 🎜🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Programmierunterricht🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonTiefes Verständnis von PIPE (Pipeline) in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!