angular中的pipe是用来对输入的数据进行处理,如大小写转换、数值和日期格式化等。

常用的pipe有

1. 大小写转换

<p>{{str | uppercase}}</p>//转换成大写
<p>{{str | lowercase}}</p>//转换成小写

2. 日期格式转换

<p>{{today | date:'yyyy-MM-dd HH:mm:ss' }}</p> 

3. 小数位数

//接收的参数格式为{最少整数位数}.{最少小数位数}-{最多小数位数}
//保留2~4位小数
<p>{{p | number:'1.2-4'}}</p>

4. JavaScript 对象序列化

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

5. slice

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

6. 管道链

<p>{{ 'semlinker' | slice:0:3 | uppercase }}</p> <!-- Output: SEM -->

7. 自定义管道

自定义管道的步骤:

  • 使用 @Pipe 装饰器定义 Pipe 的 metadata 信息,如 Pipe 的名称 - 即 name 属性

  • 实现 PipeTransform 接口中定义的 transform 方法

1.1 WelcomePipe 定义

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

@Pipe({ name: 'welcome' })
export class WelcomePipe implements PipeTransform {
transform(value: string): string {
if(!value) return value;
if(typeof value !== 'string') {
throw new Error('Invalid pipe argument for WelcomePipe');
}
return "Welcome to " + value;
}
}

1.2 WelcomePipe 使用

<div>
<p ngNonBindable>{{ 'semlinker' | welcome }}</p>
<p>{{ 'semlinker' | welcome }}</p> <!-- Output: Welcome to semlinker -->
</div>

2.1 RepeatPipe 定义

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

@Pipe({name: 'repeat'})
export class RepeatPipe implements PipeTransform {
transform(value: any, times: number) {
return value.repeat(times);
}
}

2.2 RepeatPipe 使用

<div>
<p ngNonBindable>{{ 'lo' | repeat:3 }}</p>
<p>{{ 'lo' | repeat:3 }}</p> <!-- Output: lololo -->
</div>

angular4 常用pipe管道的更多相关文章

  1. Python第十一天 异常处理 glob模块和shlex模块 打开外部程序和subprocess模块 subprocess类 Pipe管道 operator模块 sorted函数 os模块 hashlib模块 platform模块 csv模块

    Python第十一天    异常处理  glob模块和shlex模块    打开外部程序和subprocess模块  subprocess类  Pipe管道  operator模块   sorted函 ...

  2. pipe()管道最基本的IPC机制

    <h4>进程间通信 fork pipe pie_t 等用法(管道机制 通信)</h4>每个进程各自有不同的用户地址空间,任何一个进程的全局变量在另一个进程中都看不到,所以进程之 ...

  3. python线程,pipe管道通信原理

    Pipe管道: * 管道实例化后会产生两个通道,分别交给两个进程* 通过send和recv来交互数据,这是一个双向的管道,child和parent可以互相收发 from multiprocessing ...

  4. python学习笔记——multiprocessing 多进程组件 Pipe管道

    进程间通信(IPC InterProcess Communication)是值在不同进程间传播或交换信息. IPC通过有管道(无名管道 和 有名 / 命名管道).消息队列.共享存储 / 内容.信号量. ...

  5. Swoole 源码分析——基础模块之 Pipe 管道

    前言 管道是进程间通信 IPC 的最基础的方式,管道有两种类型:命名管道和匿名管道,匿名管道专门用于具有血缘关系的进程之间,完成数据传递,命名管道可以用于任何两个进程之间.swoole 中的管道都是匿 ...

  6. 驱动通信:通过PIPE管道与内核层通信

    在本人前一篇博文<驱动开发:通过ReadFile与内核层通信>详细介绍了如何使用应用层ReadFile系列函数实现内核通信,本篇将继续延申这个知识点,介绍利用PIPE命名管道实现应用层与内 ...

  7. pipe管道

    回顾: 进程间通信方式: 信号,管道 消息队列,共享内存,信号量 sokcet 信号: 本质就是软中断 signal(信号,函数指针); void func(int); kill(pid,signo) ...

  8. Linux中的pipe(管道)与named pipe(FIFO 命名管道)

    catalogue . pipe匿名管道 . named pipe(FIFO)有名管道 1. pipe匿名管道 管道是Linux中很重要的一种通信方式,是把一个程序的输出直接连接到另一个程序的输入,常 ...

  9. rxjs 常用的管道操作符

    操作符文档 api 列表 do -> tap catch -> catchError switch -> switchAll finally -> finalize map s ...

随机推荐

  1. centos5.5 快速安装mysql

    安装MySQL. [root@sample ~]# yum -y install mysql-server ← 安装MySQL[root@sample ~]# yum -y install php-m ...

  2. 通达OA 几次通过OA进行的足球抢票活动确实对OA系统提出了非常大挑战

    今年集团赞助了中超的足球比赛,有比赛的时候会提前发一些球票.怎么发.发给谁这就是一个问题.后来确定通过OA来抢票. 通过在OA上发表帖子.通过信息提醒.大家看到信息提示后在帖子后面回复,依据回复先后确 ...

  3. rabbitMQ之安装和配置(一)

    前言 erlang是一门面向并发的编程语言,流行的消息队列rabbitMQ是基于erlang环境运行的: 下载安装erlang语言环境 源码安装 # 从官网下载,在任何目录下,使用root权限 wge ...

  4. Linux Shell编程之常用技巧

    前言 本文集中介绍了bash编程中部分高级编程方法和技巧.通过学习本文内容,可以帮你解决以下问题: 1.bash可以网络编程么? 2..(){ .|.& };. 据说执行这些符号可以死机,那么 ...

  5. word文档老是出现这个提示-----“发现二义性的名称:TmpDDE”错误

    你好 我解决这个问题了,我把appdata目录下的normal.dotm删除了就没问题了 将系统中路径C:\Users\Administrator\AppData\Roaming\Microsoft\ ...

  6. 16位结构的CPU,8086给出物理地址的方法

    .16位结构的CPU 概括地讲,16位结构(16位机,字长为16位等常见说法,与16位结构的含义相同)描述了一个CPU具有下面几方面结构特性: 1.运算器一次最多可以处理16位的数据结构 2.寄存器的 ...

  7. Parallelism , Partitioner

    转:spark通过合理设置spark.default.parallelism参数提高执行效率 spark中有partition的概念(和slice是同一个概念,在spark1.2中官网已经做出了说明) ...

  8. Android——Android studio项目中如何查看R.java文件(转)

    Android Studio 是Google推出的一个Android开发环境,它集成了Android 开发工具用于开发和调试,类似 Eclipse ADT.Google公司停止对eclipse的后续支 ...

  9. 我在GitHub Pages托管静态博客啦~

    https://jinhengyu.github.io/

  10. 如何解决PHP里大量数据循环时内存耗尽的问题

    最近在开发一个PHP程序时遇到了下面的错误: PHP Fatal error: Allowed memory size of 268 435 456 bytes exhausted 错误信息显示允许的 ...