Angular8管道使用 Pipe

2020-06-11 21:04:05 阅读：1002 来源： 互联网

标签：00 自定义 pipes Pipe 管道 birthday import Angular8

这里写目录标题

概念
一、内置管道
二、自定义管道
三、非纯 AsyncPipe
四、效果
五、学习地址

概念

每个应用开始的时候差不多都是一些简单任务：获取数据、转换它们，然后把它们显示给用户。获取数据可能简单到创建一个局部变量就行，也可能复杂到从 WebSocket 中获取数据流。
一旦取到数据，你就可以把它们原始值的 toString 结果直接推入视图中。但这种做法很少能具备良好的用户体验。比如，几乎每个人都更喜欢简单的日期格式，例如1988-04-15，而不是服务端传过来的原始字符串格式 —— Fri Apr 15 1988 00:00:00 GMT-0700 (Pacific Daylight Time)。
显然，有些值最好显示成用户友好的格式。你很快就会发现，在很多不同的应用中，都在重复做出某些相同的变换。你几乎会把它们看做某种 CSS 样式，事实上，你也确实更喜欢在 HTML 模板中应用它们 —— 就像 CSS 样式一样。
通过引入 Angular 管道（一种编写"从显示到值"转换逻辑的途径），你可以把它声明在 HTML 中。

一、内置管道

<h1>内置管道</h1>

<p style="font-weight: bold;">1.日期：</p>

<p style="color:red;">管道可以同时使用多个，链式管道。</p>
<p>生日(日期大小写显示)：{{birthday | date | uppercase}}</p>
<p style="color:red;">参数用冒号隔开</p>
<p>生日(格式化日期)：{{birthday | date:"yyyy-MM-dd hh:mm:ss"}}</p>
<p>生日(短日期)：{{birthday | date:"shortDate"}}</p>
<p>生日(长日期)：{{birthday | date:"fullDate"}}</p>

<p style="font-weight: bold;">2.大小写转换：</p>
<p>转成大写：{{titleSmall | uppercase}}</p>
<p>转成小写：{{titleSmall | lowercase}}</p>

<p style="font-weight: bold;">3.货币百分比小数点：</p>
<p>小数点<span style="color:red;">（'1.3-3':小数点前保留1位，小数点后保留3至3，即3位）</span>：{{2.030256287 | number: "1.3-3"}}</p>
<p>货币默认：{{20 | currency}}</p>
<p>货币格式：{{20 | currency: '￥'}}</p>
<p>百分比默认：{{0.2 | percent}}</p>
<p>百分比位数：{{0.2 | percent: '1.1-1'}}</p>


<p style="font-weight: bold;">4.json格式：</p>
<p>{{userinfo | json}}</p>

二、自定义管道

html


<h1>自定义管道</h1>
底数：<input type="text" [(ngModel)]="bottom">

指数： <input type="text" [(ngModel)]="top">

结果:{{bottom | pipes: top}}

创建自定义管道

ng g pipe 路径文件名

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

@Pipe({
  name: 'pipes'
})
export class PipesPipe implements PipeTransform {
  transform(value: any, ...args: any[]): any {
    console.log(value);
    console.log(args);
    return Math.pow(value, args[0]);
  }
}

三、非纯 AsyncPipe

html

<h1>非纯 AsyncPipe</h1>
<p>{{message$ | async}}</p>

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/internal/Observable';
import { interval } from 'rxjs';
import { map, take } from 'rxjs/operators';

@Component({
  selector: 'app-pipes',
  templateUrl: './pipes.component.html',
  styleUrls: ['./pipes.component.css']
})
export class PipesComponent implements OnInit {

  birthday = new Date('1996-07-01 10:00:00');
  titleSmall = 'lvxin';
  titleBig = 'LVXIN';
  userinfo: any = {
    name: ' lvxin',
    age: 25
  };
  bottom = 2;
  top = 10;
  message$: Observable<string>;

  private messages = [
    'You are my hero!',
    'You are the best hero!',
    'Will you be my hero?'
  ];

  constructor() {
    this.resend();
  }
  ngOnInit() {
  }
  resend() {
    this.message$ = interval(500).pipe(
      map(i => this.messages[i]),
      take(this.messages.length)
    );
  }

}

四、效果

在这里插入图片描述

五、学习地址

Angular官网
 gitHub实例

标签：00,自定义,pipes,Pipe,管道,birthday,import,Angular8
来源： https://blog.csdn.net/lvxinaidou/article/details/106534109

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9