【Angular 4】管道

管道简介?

在开发过程中，有时我们会面临数据获取之后无法直接使用，但如果通过代码手动转换又面临性能尴尬的问题。
Angular为了解决这一类问题，产生了管道这一概念。所谓管道，就是将获取到的数据转换之后通过视图呈现出来的一种工具。这是Angular框架的特性，因此不会存在所谓的性能问题。Angular内置了一些常用管道，例如：DatePipe、UpperCasePipe、LowerCasePipe、CurrencyPipe和PercentPipe。

管道使用?

1、日期管道?

import { Component } from '@angular/core';
@Component({selector: 'app-hero-birthday',template: `<p>{{ birthday }}</p>`
})
export class HeroBirthdayComponent {birthday = new Date(2019, 5, 5);
}

使用管道前?

// 不使用管道时，显示：
Sun May 5 2019 00:00:00 GMT+0800 (中国标准时间)

使用管道后?

<p>{{ birthday | date }}</p>
// May 5, 2019

2、参数化管道?
例1中使用的是date管道来进行时间转换，有默认的转换格式。同样的，也可以自定义转换格式，只需要向data管道中传递参数就可以了。
如：我们想要一种这样的格式 2019/05/05

<p>{{ birthday | date:"yyyy/MM/dd" }}</p>

3、大小写转换管道?

⭐uppercase?将字符串转换为大写 ⭐lowercase?将字符串转换为小写

<p>将字符串转换为大写{{ str | uppercase }}</p>

str:string = 'hello';

页面会显示：将字符串转换为大写HELLO

4、小数管道?
number管道用来将数字处理为我们需要的小数格式。
接收的参数格式为 → {最少整数位数}.{最少小数位数}-{最多小数位数}
其中，
{最少整数位数}默认为1
{最少小数位数}默认为0
{最多小数位数}默认为3
当小数位数少于规定的{最少小数位数}时，会自动补0
当小数位数多于规定的{最多小数位数}时，会四舍五入

<p>圆周率是{{ pi | number:'2.2-4' }}</p>

pi:number = 3.14159;

页面会显示：圆周率是03.1416

5、货币管道?
currency管道用来将数字转换为货币格式

<p>{{ a | currency:'USD':false }}</p>
<p>{{ b | currency:'USD':true:'4.2-2' }}</p>

a:number = 8.2515
b:number = 156.548

页面会显示：USD8.25。
0156.55这里的′USD′是美元UnitedStatesdollar的缩写，当为false时不显示符，当为true时，则显示 $ 符。后面的规定小数位数的参数和上面介绍的一样。

【Angular 4】管道相关推荐

Angular自定义管道（过滤器）方法
1.命令行新建一个管道:放在项目里pipe文件夹里 ng g pipe pipe/multiple 新建管道之后就声明在app.module.ts文件里了 2.multiple.pipe.ts示例 i ...
Angular 通过管道pipe，转换后台字典数据
背景:系统中很多字典数据都是在后台获取,通常是一些数字或者字母.我们要把他转换成用户看得懂的文字一.列表字典数据转换(只能在页面使用) 1.创建pipe文件 dictData 为页面查询到的字典数据 ...
前端学习（2337）：angular之管道
php+管道+pipe管道,angular2+管道pipe
一.什么是Pipe? 就是管道,简单来说,管道的作用就是传输.并且不同的管道具有不同的作用.(其实就是处理数据) 二.pipe用法 {{ 输入数据 | 管道 : 管道参数}} (其中'|'是管道操作 ...
angular要多久学会_成为优秀Angular开发者所需要学习的19件事
一款to-do app基本等同于前端开发的"Hello world".虽然涵盖了创建应用程序的CRUD方面,但它通常只涉及那些框架或库也能做到的皮毛而已. Angular看起来似乎 ...
Angular 基础
angular 需要在node.js V10.9 以上版本使用一.搭建angulaur 脚手架 1.下载并安装脚手架工具 npm i -g @angular/cli 2.运行脚手架工具,创建空白项目 ...
angular5.0封装underscore常用pipe并发布到npm全套流程
项目背景今天心血来潮,以前不常写东西,接触angular以来,觉得有必要分享一些新的体会了,于是来到了这里. 管道Pipe可以将数据作为输入,然后按照规则将其转换并输出. 创建项目 ng new m ...
SAP Spartacus 如何连接到其他系统
Connecting to Other Systems Commerce Cloud 解决方案的系统架构由各种系统组成,这些系统通常在各种应用层(包括前端)上进行编排. Spartacus 默认连接到 ...
SAP 产品一脉相承的 UI 增强思路，在 SAP Commerce Cloud(电商云) UI 增强实现中的体现
本文首先快速回顾几种 SAP 产品中的 UI 增强思路,然后具体介绍该思路是如何在 SAP Commerce Cloud(电商云) UI 增强中贯彻实施的. Jerry 之前的文章:Jerry 在 2 ...
Angular-cli环境搭建,组件的数据渲染,父子组件传值
Angular cli-1 博主wx: -GuanEr-,加博主进前端交流群 Angular 脚手架的脚本是 TypeScript 环境搭建使用 node.js 配置 Angular-cli 的环境 ...

【Angular 4】管道

管道简介?

管道使用?

【Angular 4】管道相关推荐

最新文章

热门文章