5 Angular-管道（系统定义）

1 代码结构

 2 myc01.component.html

 1 
myc01 works!
 2 
 3 
 4 
 5 
 6 

 7     
大写：{{'hello'|uppercase}}
 8     
小写：{{'WORLD'|lowercase}}
 9     
首字母大写：{{'my name is chris'|titlecase}}
10     
百分数：{{0.33|percent}}
11     
12     
百分数小数位：{{0.55555|percent:'2.2'}}
13     
百分数小数位：{{0.55555|percent:'2.1'}}
14     
15     
百分数的小数位：{{0.055|percent:'2.2'}}
16     
17     
钱：{{123456.789|currency}}
18     
钱：{{123456.789|currency:'￥'}}
19     
20     
21     
时间戳：{{time}}
22     
日期格式：{{time|date}}
23     
日期：{{time|date:'yyyy-MM-dd HH:mm:ss'}}
24     
日期：{{time|date:'yyyy-M-d hh:mm:ss'}}
25 

3 myc01.compoment.ts

 1 import { Component, OnInit } from '@angular/core';
 2 
 3 @Component({
 4   selector: 'app-myc01',
 5   templateUrl: './myc01.component.html',
 6   styleUrls: ['./myc01.component.css']
 7 })
 8 export class Myc01Component implements OnInit {
 9 
10   time = new Date().getTime();
11 
12   constructor() { }
13 
14   ngOnInit(): void {
15   }
16 
17 }

4 效果图