PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

深入了解Angular中的PIPE(管道)

青灯夜游
青灯夜游 转载
2021-06-28 11:41:09 4424浏览

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 装饰器定义 Pipemetadata 信息,如 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>

完~

更多编程相关知识,请访问:编程教学!!

声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除