深入了解Angular中的PIPE（管道）

在angular中，pipe（管道）可以用來對輸入的資料進行處理，且不同的管道具有不同的作用。那麼具體怎麼使用pipe（管道）？以下這篇文章就來帶大家深入研究Angular中的PIPE（管道），看看它的使用方法。

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### 方法##############定義## ####

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;
        }
    }
}

######使用######

<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>

######後~#########更多程式相關知識，請造訪：###程式設計教學###！ ！ ###

以上是深入了解Angular中的PIPE（管道）的詳細內容。更多資訊請關注PHP中文網其他相關文章！