5 Angular管道（系统定义）

1 代码结构

 2 myc01.component.html

<p>myc01 works!</p>

<!--pipe管道-->
<!--与vue不同：vue中的管道需要用户自己定制声明-->
<!--angular官方提供了一些常用的管道-->
<ul>
    <li>大写：{{'hello'|uppercase}}</li>
    <li>小写：{{'WORLD'|lowercase}}</li>
    <li>首字母大写：{{'my name is chris'|titlecase}}</li>
    <li>百分数：{{0.33|percent}}</li>
    <!--参数2:2.2代表整数位2位 小数位2位-->
    <li>百分数小数位：{{0.55555|percent:'2.2'}}</li>
    <li>百分数小数位：{{0.55555|percent:'2.1'}}</li>
    <!--不足要求的位数，会用0补全-->
    <li>百分数的小数位：{{0.055|percent:'2.2'}}</li>
    <!--千进位数字表达方式-->
    <li>钱：{{123456.789|currency}}</li>
    <li>钱：{{123456.789|currency:'¥'}}</li>
    <!--日期格式-->
    <!--时间戳：当前时间举例1970.1.1的秒数-->
    <li>时间戳：{{time}}</li>
    <li>日期格式：{{time|date}}</li>
    <li>日期：{{time|date:'yyyy-MM-dd HH:mm:ss'}}</li>
    <li>日期：{{time|date:'yyyy-M-d hh:mm:ss'}}</li>
</ul>

3 myc01.compoment.ts

import { Component, OnInit } from '@angular/core';

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

  time = new Date().getTime();

  constructor() { }

  ngOnInit(): void {
  }

}

4 效果图