屬性綁定 Property Binding

什麼是屬性綁定？

在 Angular 中，屬性綁定允許我們動態設置 HTML 元素的屬性值。使用 [] 語法來實現。

基本語法比較

<!-- 靜態值 -->
<option value="1">台北</option>

<!-- 動態綁定 -->
<option [value]="location.id">{{ location.name }}</option>

Vue vs Angular 屬性綁定對照

基本綁定

<!-- Vue -->
<input :value="message">
<div :class="className">

<!-- Angular -->
<input [value]="message">
<div [class]="className">

Select 元素綁定

<!-- Vue -->
<select v-model="selectedId">
  <option :value="item.id" v-for="item in items">
    {{ item.name }}
  </option>
</select>

<!-- Angular -->
<select [(ngModel)]="selectedId">
  @for (item of items; track item.id) {
    <option [value]="item.id">{{ item.name }}</option>
  }
</select>

常見使用場景

1. 表單元素

export class SearchComponent {
  locationId: number = 1;
  searchTerm: string = '';
}

<input [value]="searchTerm">
<select [value]="locationId">
  @for (location of locations; track location.id) {
    <option [value]="location.id">{{ location.name }}</option>
  }
</select>

2. 樣式綁定

<!-- 類別綁定 -->
<div [class.active]="isActive">

<!-- 樣式綁定 -->
<div [style.color]="textColor">

3. 圖片來源

<img [src]="imageUrl" [alt]="imageAlt">

注意事項

1. 字串值與表達式

<!-- 靜態字串：不需要綁定 -->
<div class="header">

<!-- 動態值：需要綁定 -->
<div [class]="headerClass">

1. 布林屬性

<!-- 錯誤用法 -->
<button disabled="isDisabled">

<!-- 正確用法 -->
<button [disabled]="isDisabled">

1. 複合屬性

<!-- 樣式物件綁定 -->
<div [style]="{
  color: textColor,
  fontSize: fontSize + 'px'
}">

實用技巧

1. 條件樣式

<div [class.active]="isActive"
     [class.disabled]="isDisabled"
     [class.highlight]="isHighlighted">
  Content
</div>

2. 動態屬性名

export class MyComponent {
  propertyName = 'color';
  propertyValue = 'red';
}

<div [attr.data-test]="testValue">
<div [style.--main-color]="primaryColor">