前言

PIPE，翻譯為管道。Angular 管道是編寫可以在HTML元件中宣告的顯示值程式設計客棧轉換的方法。Angular 管道之前在 Angularjs 中被稱為過濾器，從 Angular 2開始就被稱為管道。管道將資料作為輸入並將其轉換為所需的輸出。

Angular Pipes 將整數、字串、陣列和日期作為輸入，用| 分隔，然後根據需要轉換成格式，並在瀏覽器中顯示出來。在插值表示式中，可以定義管道並根據情況使用它，在 Angular 應用程式中可以使用許多型別的管道。

內建管道

• String -> String
  • UpperCasePipe
  • LowerCasePipe
  • TitleCasePipe
• Number -> String
  • DecimalPipe
  • PercentPipe
  • CurrencyPipe
• Object -> String
  • JsonPipe
  • Datewww.cppcns.comPipe
• Tools
  • SlicePipe
  • AsyncPipe
  • I18nPluralPipe
  • I18nSelectPipe

使用方法

大寫轉換

<div>
  <p ngNonBindable>{{ 'Angular' | uppercase }}</p>
  <p>{{ 'http://www.cppcns.comAngular' | uppercase }}</p> <!-- Output: ANGULAR -->
</div>

日期格式化

<div>
  <p ngNonBindable>{{ today | date: 'shortTime' }}</p>
  <p>{{ today | date: 'shortTime' }}</p> <!-- Output: 以當前時間為準，輸出格式：10:40 AM -->
</div>

數值格式化

<div>
  <p ngNonBindable>{{ 3.14159265 | number: '1.4-4' }}</p>
  <p>{{ 3.14159265 | number: '1.4-4' }}</p> <!-- Output: 3.1416 -->
</div>

javascript 物件序列化

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

管道引數

管道可以接收任意數量的引數，使用方式是在管道名稱後面新增:和引數值。如number: '1.4-4'，若需要傳遞多個引數則引數之間用冒號隔開，具體示例如下：

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

管道鏈

<div>
  <http://www.cppcns.comp ngNonBindable>{{ 'semlinker' | slice:0:3 | uppercase }}</p>
  <p>{{ 'semlinker' | slice:0:3 | uppercase }}</p>
</div>

自定義管道

下面以過往專案中使用的管道為示例，講解自定義管道步驟：

• 使用 @Pipe 裝飾器定義 Pipe 的 metadata 資訊，如 Pipe 的名稱 - 即 name 屬性
• 實現 PipeTransform 介面中定義的 transform 方法

定義

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

@Pipe({ name: "formatError" })
export class FormatErrorPipe implements PipeTransform {
    constructor() {}

    transform(value: any,module: strin程式設計客棧g) {
        if (value.code) {
            return value.desc;
        } else {
            return value.message;
        }
    }
}

使用

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

總結

到此這篇關於Angular管道PIPE的文章就介紹到這了,更多相關Angular管道PIPE內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！