Angular2之管道学习笔记-白红宇

Angular2之管道学习笔记

阅读量：6622 次

发布时间：2019-06-25

本文共 3438 字，大约阅读时间需要 11 分钟。

管道。可以把一个输出流与另一个输入流连接起来。类似 linux、gulp都有应用。

在Angular2中使用管道非常方便。Angular2中本身提供了一些内置管道。当然也可以自定义管道。

文档链接：https://angular.cn/docs/ts/latest/api/#!?apiFilter=pipe&query=pipe

日常开发中，内置管道也足够用了。常用的有以下几个：

1.字符串、数组截取

官方demo:

@Component({  selector: 'slice-string-pipe',  template: `
         
      {
   {str}}[0:4]: '{
   {str | slice:0:4}}' - output is expected to be 'abcd'
　　　　// 截取第0个字符到第4个字符，即前四个字符　    
      {
   {str}}[-4]: '{
   {str | slice:-4}}' - output is expected to be 'ghij'
　　　　　// 截取字符串最后四个字符    
      {
   {str}}[-4:-2]: '{
   {str | slice:-4:-2}}' - output is expected to be 'gh'
　　　//从字符串倒数第四个字符开始截取，直至倒数第二个字符  
     
`})export class SlicePipeStringComponent {  str: string = 'abcdefghij';}

2.大小写转换

官方demo:

@Component({  selector: 'lowerupper-pipe',  template: `
         
      Name: 
          
      In lowercase: 
      '{
   {value | lowercase}}'
　　　　　　　　//将value转换成小写    
      In uppercase: 
      '{
   {value | uppercase}}'
　　　　　　　　//将value转换成大写  
     
`})export class LowerUpperPipeComponent {  value: string;  change(value: string) { this.value = value; }}

3.日期转换

官方demo:

@Component({  selector: 'date-pipe',  template: `
         
      Today is {
   {today | date}}
    
      Or if you prefer, {
   {today | date:'fullDate'}}
    
      The time is {
   {today | date:'jmZ'}}
  
     
`})export class DatePipeComponent {  today: number = Date.now();}

用法：{

{ today | date[:format] }}

today可以是日期对象、时间戳（毫秒）、ISO字符串，适用范围还是挺广泛的。

[:format] 范围也特别广，常见的写法如下：

{

{ today | date:"y-MM-dd"}}　　//2017-03-14

{

{ today | date:"mmss"}}　　//11:35

{

{ today | date:"y年MM月dd日HH时mm分ss秒"}}　　//2017年03月14日11时37分12秒

还有显示日期的格式组合，包括数字、英文、时区等。可以参考官方文档：

https://angular.cn/docs/ts/latest/api/common/index/DatePipe-pipe.html

4.对象转换json

官方demo:

@Component({  selector: 'json-pipe',  template: `
         
      Without JSON pipe:
    
      {
   {object}}
    
      With JSON pipe:
    
      {
   {object | json}}
  
     
`})export class JsonPipeComponent {  object: Object = {foo: 'bar', baz: 'qux', nested: {xyz: 3, numbers: [1, 2, 3, 4, 5]}};}

5.格式化数字

日常开发中，有时候需要保留小数点后两位，有时候需要取整。可以用这个管道

注：除了 Chrome、Firefox、Edge、IE11 和 Safari 10 外的所有浏览器都不支持，需要支持的话需要导入intl(https://github.com/andyearnshaw/Intl.js)

官方demo:

@Component({  selector: 'number-pipe',  template: `
         
      e (no formatting): {
   {e}}
    
      e (3.1-5): {
   {e | number:'3.1-5'}}
　　　　//整数最小有3位。小数最小有一位，最多有5位     
      pi (no formatting): {
   {pi}}
    
      pi (3.5-5): {
   {pi | number:'3.5-5'}}
　　　//整数最小3位，小数只能有5位  
     
`})export class NumberPipeComponent {  pi: number = 3.141592;  e: number = 2.718281828459045;}

用法： number | number[:digitInfo]

digitInfo是一个string具有以下格式：

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

- minIntegerDigits是要使用的最小整数位数。默认为1。
- minFractionDigits是分数后的最小位数。默认为0。
- maxFractionDigits是分数后的最大位数。默认为3。

{
   {number | number:'1.2-2'}}
   // 将数字变成两位小数

6.数字格式化为百分数

{
   {number | percent:'1.2-2'}}
   // 将数字变成百分数两位小数  20.84%

用法和第五点格式化数字一样，就是显示结果后面多了一个百分号%

7.数字格式化为货币

用法：number | currency[:currencyCode[:symbolDisplay[:digitInfo]]]

demo:

@Component({  selector: 'currency-pipe',  template: `
         
      A: {
   {a | currency:'USD':false}}
    
      B: {
   {b | currency:'USD':true:'4.2-2'}}
  
     
`})export class CurrencyPipeComponent {  a: number = 0.259;  b: number = 1.3495;}

个人感觉最大的弊端就是这个货币符号/代码不能单独调样式。

8.I18nSelect

I18n（其来源是英文单词 internationalization的首末字符i和n，18为中间的字符数）是“国际化”的简称。

工作太忙，有空再把剩下的内容补上

转载于:https://www.cnblogs.com/BillyQin/p/6548366.html

你可能感兴趣的文章