欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Angular管道PIPE的介紹與使用方法

 更新時(shí)間:2021年06月22日 12:48:11   作者:天行無(wú)忌  
這篇文章主要給大家介紹了關(guān)于Angular管道PIPE的相關(guān)資料,管道的作用就是傳輸,并且不同的管道具有不同的作用,需要的朋友可以參考下

前言

PIPE,翻譯為管道。Angular 管道是編寫可以在HTML組件中聲明的顯示值轉(zhuǎn)換的方法。Angular 管道之前在 AngularJS 中被稱為過(guò)濾器,從 Angular 2開始就被稱為管道。管道將數(shù)據(jù)作為輸入并將其轉(zhuǎn)換為所需的輸出。

Angular Pipes 將整數(shù)、字符串、數(shù)組和日期作為輸入,用| 分隔,然后根據(jù)需要轉(zhuǎn)換成格式,并在瀏覽器中顯示出來(lái)。在插值表達(dá)式中,可以定義管道并根據(jù)情況使用它,在 Angular 應(yīng)用程序中可以使用許多類型的管道。

內(nèi)建管道

  • String -> String
    • UpperCasePipe
    • LowerCasePipe
    • TitleCasePipe
  • Number -> String
    • DecimalPipe
    • PercentPipe
    • CurrencyPipe
  • Object -> String
    • JsonPipe
    • DatePipe
  • Tools
    • SlicePipe
    • AsyncPipe
    • I18nPluralPipe
    • I18nSelectPipe

使用方法

大寫轉(zhuǎn)換

<div>
  <p ngNonBindable>{{ 'Angular' | uppercase }}</p>
  <p>{{ 'Angular' | uppercase }}</p> <!-- Output: ANGULAR -->
</div>

日期格式化

<div>
  <p ngNonBindable>{{ today | date: 'shortTime' }}</p>
  <p>{{ today | date: 'shortTime' }}</p> <!-- Output: 以當(dāng)前時(shí)間為準(zhǔn),輸出格式:10:40 AM -->
</div>

數(shù)值格式化

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

JavaScript 對(duì)象序列化

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

管道參數(shù)

管道可以接收任意數(shù)量的參數(shù),使用方式是在管道名稱后面添加:和參數(shù)值。如number: '1.4-4',若需要傳遞多個(gè)參數(shù)則參數(shù)之間用冒號(hào)隔開,具體示例如下:

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

管道鏈

<div>
  <p ngNonBindable>{{ 'semlinker' | slice:0:3 | uppercase }}</p>
  <p>{{ 'semlinker' | slice:0:3 | uppercase }}</p>
</div>

自定義管道

下面以過(guò)往項(xiàng)目中使用的管道為示例,講解自定義管道步驟:

  • 使用 @Pipe 裝飾器定義 Pipe 的 metadata 信息,如 Pipe 的名稱 - 即 name 屬性
  • 實(shí)現(xiàn) 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:'*',params:{opacity:'0',duration:'200ms'}}">
        {{errorMessage.error | formatError:"auth"}}
    </div>
</div>

總結(jié)

到此這篇關(guān)于Angular管道PIPE的文章就介紹到這了,更多相關(guān)Angular管道PIPE內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論