其他分享
首页 > 其他分享> > Angular8管道使用 Pipe

Angular8管道使用 Pipe

作者:互联网

这里写目录标题

概念

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

ts

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>

ts

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