HackMD
Angular - Directive 與 Pipe 初認識
Directive
directive （指令），是 DOM 元素上的一個 mark(標記)，像是屬性、元素名稱或是 style，它用來告訴 template 將指定的行為附加到該 DOM 元素上（像是事件監聽），替元素增加新的方法或是功能。
Directive 的類型
directive 一共可以分為三種類型：
- Components（組件） — 組件是最常見的 directive， Angular 的應用程式就是由一群 component 所組成的。
- Structural directives（結構型指令） — 藉由加入及移除 DOM 元素來改變 DOM layout
- Attribute directives(屬性型指令) — 改變元素、元件的外觀或行為
其實在之前我們已經使用過了 Angular 中的指令，像是 *ngIf 以及 *ngFor，這兩個指令屬於結構型指令，所以這一章節會針對 Attribute directives (屬性型指令) 來做介紹。
屬性型指令 (Attribute directives)
屬性型指令，因其在 Template 中看起來就像是 HTML Tag 的屬性，故以此命名。
在開發的過程中，可能會經常遇到需要改變樣式的狀況，
常見的內建指令有以下三種：
- ngClass: 添加或刪除 DOM element 的 CSS Class
- ngStyle: 添加或刪除 DOM element 的 CSS 屬性
- ngModule: 於表單中添加雙向數據綁定（介紹雙向綁定時有使用過！）
ngClass
- 基本使用方式
第一個參數為 class 的名稱，第二個參數是 boolean 值，如果布林值為 true ，則添加該 class
以下範例是，若為 true，則添加isDone這個 class
<div [ngClass]="{'isDone':true}"></<div>
- 使用判斷增加刪除 class
使用先前實作的 todo list 來實作判斷。
<div *ngFor="let task of tasks; let i = index; let first = first">
<div class="task__item">
<span>{{ i + 1 }}</span>
<input type="checkbox" (change)="handleChecked(i)" />
<!-- 使用 ngClass 來做判斷，若 i 值 = 0，則為該元素添加 isFirst 的 class -->
<span [ngClass]="{ isFirst: i === 0 }">{{ task.taskTitle }}</span>
<button *ngIf="!task.isCheck; else tDone" (click)="handleRemoveTask(i)">
remove
</button>
<ng-template #tDone>DONE</ng-template>
</div>
</div>
.isFirst {
font-size: 20px;
font-weight: 600;
}
ngStyle
- 基本使用方式
<div [ngStyle]="{'background-color':'green'}"></<div>
- 使用判斷增加或刪除 style
使用先前實作的 todo list 來實作判斷。
<!-- 使用 ngStyle 判斷任務是否完成，如果完成就加粗 -->
<div class="task__item" [ngStyle]="{ fontWeight: task.isCheck ? 600 : '' }">
<span>{{ i + 1 }}</span>
<input type="checkbox" (change)="handleChecked(i)" />
<span>{{ task.taskTitle }}</span>
<button *ngIf="!task.isCheck; else tDone" (click)="handleRemoveTask(i)">
remove
</button>
<ng-template #tDone>DONE</ng-template>
</div>
Pipes
在渲染視圖之前，先將資料進行轉換，但是原始資料並不會被影響！
Angular 中有提供了一些內建的 Pipes 供使用，像是轉換字型是大寫或小寫，數字轉為小數點或是進行日期的轉換。
那為什麼會叫做 pipes ? 因為他的符號是寫成 | 看起來就像是一個管子的樣子！
內建 Pipes 的類型
- 字串轉換
- 轉換為大寫：
<h1>{{title | uppercase}}</h1> - 轉換為小寫：
<h1>{{title | lowercase}}</h1> - 首字母大寫：
<h1>{{title ｜ titlecase}}</h1> - 截取部分字串：
<h1>{{title | slice:從哪裡開始：到哪裡結束}}</h1>
// 假設 title = "today is sunday"
<h1>{{title | slice:3}}<h1>
// 這裡會呈現 "ay is sunday"，從 index 3 開始
<h1>{{title | slice:3:7}}</h1>
// 這裡會呈現 "ay i"，代表從 index 3 開始，在 index 7 之前結束
- 呈現 json 格式：
<h1>{{object | json}}</h1>
- 數字轉換
- 數字小數點：
{{count | number:"在小數點前的最小位數.小數點後的最小位數-小數點後的最大位數"}}
// 假設 count = 345.2345
<p>{{count | number:"1.2-3"}}</p>
// 這裡會呈現 345.235
<p>{{count | number:"1.6-7"}}</p>
// 這裡會呈現 345.234500
- 數字百分比：
{{count | percent}}
- 貨幣轉換：
{{count | currency : "貨幣代號"}} - 日期轉換
- 'M/d/yy, h:mm a' :
{{myDate | date:"short"}} - 'M/d/yy' :
{{myDate | date:"shortDate"}}
更多日期格式可以參考 Angular 官方
