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 的類型

1. 字串轉換

• 轉換為大寫：<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>

2. 數字轉換

• 數字小數點：{{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}}

3. 貨幣轉換：{{count | currency : "貨幣代號"}}
4. 日期轉換

• 'M/d/yy, h:mm a' : {{myDate | date:"short"}}
• 'M/d/yy' : {{myDate | date:"shortDate"}}
  更多日期格式可以參考 Angular 官方

參考資料

• [Angular 深入淺出三十天] Day 06 - 基礎結構說明（三）
• Angular - attribute-directives
• Angular Tutorial - 16 - Pipes

tags: Angular