🇹🇼

Angular 基礎｜從 Todo List 認識四種資料綁定

發佈時間

本篇主要在認識四種資料綁定，使用 todoMVC 提供的模板樣式練習。

  • 可參考 DEMO / Github，這是合併 TodoList 和 Pomodoro 兩種功能的小專案，透過實作來練習資料綁定。

資料綁定 Data Binding#

斯斯有兩種，資料綁定有四種。

下圖出自於 Angular 官網：

資料綁定（Data Binding）是 Angular 用來協調 Component（TypeScript）與 Template（HTML）互相傳遞資料的機制，依照方向性的不同，可分為四種綁定方式：

  • 內嵌綁定/插值（Interpolation）
    • {{value}}
  • 屬性綁定（Property Binding）
    • [propertyName] = 'value'
    • [attr.attributeName] = 'value'
  • 事件綁定（Event Binding）
    • (eventName) = 'someMethod($event)'
    • (eventName.key) = 'someMethod($event)'
  • 雙向綁定（Two-Way Binding）
    • [(ngModel)] = 'property'

前三種均屬於單向綁定（One-Way Binding）；第四種雙向綁定，則是屬性綁定加上事件綁定的組合。


內嵌綁定（插值）#

  • 單向性：value 改變 HTML 跟著變
    • Component 變數 →Template 值
  • 使用方法：直接在 HTML 中插入變數 {{value}}

以下為範例：

  • app.component.html：在 Template 在要嵌入的地方加上{{雙大括號}}
<h1>{{title}}</h1>
  • app.component.ts：變數 title 一旦改變，會連動更新 HTML h1 的內容
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Todo List';
}

屬性綁定#

  • 單向性：value 改變會影響 property，HTML 跟著改變
    • Component 變數 →Template 值
  • 使用方法：在 HTML 中的屬性加上 [property]="value"

以下為範例：

  • todo-list.component.ts：新增一個 inputHint 變數
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class TodoListComponent implements OnInit {
  inputHint = 'Add New Todo Here...';
}
  • todo-list.component.html：變數 inputHint 一旦改變，會連動更新 input 的 placeholder 內容
<input class="todo-input" [placeholder]="inputHint" autofocus>

結果如下：

根據使用的 property 又分以下幾種，常用於根據綁定 value 布林值決定顯示或移除：

  • Emelent property：例如綁定路徑、是否鎖住按鈕等等
<img [src]="imageUrl">

<button [disabled]="!isValid">Save</button>
  • Component property：使用對象為 Component，常用於傳入資料
<hero-detail [hero]="currentHero"></hero-detail>
  • Class property：CSS 類別
<li [class.completed]="todo.done"></li>
  • Attribute property：CSS 屬性
[attr.attributeName] = "statement"

 <label [attr.contenteditable]="!todo.done"></label>
  • Style property：CSS 風格
<button [style.color] = "isValid ? 'green': 'red'">Save</button>
  • Directive property： ngClass 和 ngStyle 是 Angular 提供動態設置 CSS 的方法
<li [ngClass]="{completed: todo.done}"></li>

事件綁定#

  • 單向性：一旦觸發指定 event，就會呼叫 TypeScript 中的 someMethod 方法
    • Template 發送事件 →Component 呼叫方法
  • 使用方法：在 HTML 中的加入 (event)="someMethod()"

以下為範例：

  • app.component.ts：宣告 onClick() 方法
export class AppComponent {
  onClick(value: string): void {
      alert("Hello " + value);
  }
}
  • app.component.html：在 HTML 設定 Click 事件，觸發時就會呼叫 TypeScipt 的 onClick 方法
<button (click)="onClick('World')">Click Me!</button>

結果可參考 [DEMO]：(https://codesandbox.io/embed/event-binding-6gs11?fontsize=14&hidenavigation=1&theme=dark)

雙向綁定：屬性 + 事件#

[()] 符號口訣：Banana is in the Box!（香蕉在箱子裡）

  • 雙向性：Component 或 Template 其中一方的值改變，另一方也會跟著變
    • Component ⇄ Template
  • 使用方法：在 HTML 加入 [(ngModel)] 語法，使用前需要先在 AppModule 引用 FormsModule
  • 通常用於 <input>、<textarte> 等表單元素

以新增 Todo 功能為例：

  • todo-list.component.ts：宣告一個 todos 陣列、變數 todo 和 addTodo() 方法
import { Component } from '@angular/core';

@Component({
  selector: 'app-todo-list',
  templateUrl: './todo-list.component.html',
  styleUrls: ['./todo-list.component.css']
})
export class TodoListComponent {
  todos = [];
  todo = '';

  // 新增 Todo 功能
  addTodo() {
    if (!this.todo.trim()) { return; }    // input 為空則返回
    this.todos.push({     // 把狀態暫存在 model
      text: this.todo,  // todo 內容
      done: false       // 是否已完成
    });
    this.todo = '';    // 新增完就清空
  }
}
  • todo-list.component.html：分別在 input 設定 Enter 事件，以及 button 設定 Click 事件，觸發事件時就會呼叫 addTodo() 方法
<input
  class="todo-input" [placeholder]="inputHint"
  [(ngModel)]="todo" (keyup.enter)="addTodo()"
>
<button class="btn-add" (click)="addTodo()"></button>

使用 [(ngModel)] 語法，要記得在 app.module.ts 引入 FormsModule：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';  //NgModel lives here

@NgModule({
  // ...
  imports: [
    BrowserModule,
    FormsModule  //import the FormsModule before binding with [(ngModel)]
  ],

})

實作：刪除 Todo 功能#

在上述範例中，我們完成了新增 Todo 功能，接著要實作刪除 Todo：

  • todo-list.component.html
    • *ngIf: 透過判斷式控制資料顯示與否
    • *ngFor: 透過迴圈顯示多筆資料
    • 使用內建的 pipe: uppercase 會統一將輸出轉成大寫
    • 在 button 元素加上事件綁定 click
<section class="main" *ngIf="todos.length > 0">
  <ul class="todo-list">
    <li *ngFor="let item of todos">
      <div class="view">
        <input class="toggle" type="checkbox">
        <label>{{item.text | uppercase}}</label>
        <button class="btn-destroy" (click)="removeTodo(item)"></button>
      </div>
    </li>
  </ul>
</section>
  • todo-list.component.ts：觸發 click 事件時就會呼叫 removeTodo 方法
removeTodo(item): void {
  this.todos.splice(this.todos.indexOf(item), 1);
}

補充：淺談 NgClass 與 NgStyle#

NgClass 與 NgStyle 是 Angular 提供的指令，可用來動態改變 DOM 元素的 CSS，以下和原生屬性與不同綁定方式進行比較：

  • Native attributes：靜態使用單一 / 多個樣式
  • Class 和 Style Bindings：動態使用單一樣式
  • 使用 NgClass 和 NgStyle：動態使用單一 / 多個樣式
<!-- Native Attributes -->
<input class="is-danger" style="border: none; color: blue">

<!-- Angular Bindings -->
<input [class.is-danger]="isDanger" [style.border]="hasborder">

<!-- ngClass -->
<input [ngClass]="{'is-danger': isDanger, 'myButton': true}">
<input [ngClass]="isDangerButton">

<!-- ngStyle -->
<input [ngStyle]="{'border': hasBorder, 'color': colorProp}">
<input [ngStyle]="hasColorBorder">

至於優缺點，以下方程式碼為例：

  • 動態使用單一樣式
    • 可讀性高
<li [class.completes]="todo.isDoing"
    [class.editing]="todo.isEditing"
    [style.font-size.px]="fontSize">
</li>
  • 動態使用多種樣式
    • 可透過物件形式，一次表達多種樣式
    • Angular 8 版本以後，官方推薦直接以 [class] 或 [style] 撰寫，而不使用 [ngClass] 或 [ngStyle]
<li [class]="{completed: todo.isDone, editing: todo.isEditing}"
    [style]="{'font-size': fontSize + 'px' }">
</li>

兩者可達成相同效果，依照需求和習慣選用即可！

參考資料：