纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

Angular管道PIPE Angular管道PIPE的介绍与使用方法

天行无忌   2021-06-22 我要评论
想了解Angular管道PIPE的介绍与使用方法的相关内容吗天行无忌在本文为您仔细讲解Angular管道PIPE的相关知识和一些Code实例欢迎阅读和指正我们先划重点:angular管道,pipe,angular管道的理解,angular自定义管道下面大家一起来学习吧。

前言

PIPE翻译为管道。Angular 管道是编写可以在HTML组件中声明的显示值转换的方法。Angular 管道之前在 AngularJS 中被称为过滤器从 Angular 2开始就被称为管道。管道将数据作为输入并将其转换为所需的输出。

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

内建管道

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

使用方法

大写转换

<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: 以当前时间为准输出格式: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>
  <p 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: 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>

总结


相关文章

猜您喜欢

  • comparable和comparator的区别 java对象对比之comparable和comparator的区别

    想了解java对象对比之comparable和comparator的区别的相关内容吗超分辨菜鸟在本文为您仔细讲解comparable和comparator的区别的相关知识和一些Code实例欢迎阅读和指正我们先划重点:comparable和comparator的区别,Java接口下面大家一起来学习吧。..
  • Spring Batch 入门 Spring Batch 入门示例

    想了解Spring Batch 入门示例的相关内容吗锅外的大佬在本文为您仔细讲解Spring Batch 入门的相关知识和一些Code实例欢迎阅读和指正我们先划重点:Spring,Batch,入门下面大家一起来学习吧。..

网友评论

Copyright 2020 www.Videogametimes.com 【视游时光】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式