5 Angular-管道（系統定義）

1 代碼結構

 

 2 myc01.component.html

 1 <p>myc01 works!</p>
 2 
 3 <!--pipe管道-->
 4 <!--與vue不同：vue中的管道需要用戶自己定製聲明-->
 5 <!--angular官方提供了一些常用的管道-->
 6 <ul>
 7     <li>大寫：{{'hello'|uppercase}}</li>
 8     <li>小寫：{{'WORLD'|lowercase}}</li>
 9     <li>首字母大寫：{{'my name is chris'|titlecase}}</li>
10     <li>百分數：{{0.33|percent}}</li>
11     <!--參數2:2.2代表整數位2位 小數位2位-->
12     <li>百分數小數位：{{0.55555|percent:'2.2'}}</li>
13     <li>百分數小數位：{{0.55555|percent:'2.1'}}</li>
14     <!--不足要求的位數，會用0補全-->
15     <li>百分數的小數位：{{0.055|percent:'2.2'}}</li>
16     <!--千進位數字表達方式-->
17     <li>錢：{{123456.789|currency}}</li>
18     <li>錢：{{123456.789|currency:'¥'}}</li>
19     <!--日期格式-->
20     <!--時間戳：當前時間舉例1970.1.1的秒數-->
21     <li>時間戳：{{time}}</li>
22     <li>日期格式：{{time|date}}</li>
23     <li>日期：{{time|date:'yyyy-MM-dd HH:mm:ss'}}</li>
24     <li>日期：{{time|date:'yyyy-M-d hh:mm:ss'}}</li>
25 </ul>

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 效果圖