前言
Data Binding 是 Angular 的核心功能之一, 可以幫助我們將應用程式的資料和 DOM 建立關聯, 實現動態資料更新 DOM 的效果.
Data Binding 用途
Angular Data Binding 主要有四種形式:
- 插值綁定 (Interpolation)
- 屬性綁定 (Property Binding)
- 事件綁定 (Event Binding)
- 雙向綁定 (Two-way Binding)
Data Binding 優點
- 更加輕鬆地將 Component 與 Template 建立關聯
- 提高開發效率和可維護性
- Angular 變更偵測機制可以實現高效的資料更新, 避免不必要的 DOM 操作
Interpolation
使用 {{ }} 語法將資料綁定到 Template, 通常用於將資料顯示在標題、段落或表格等元素中.
<h1>{{ title }}</h1>
<p>{{ content }}</p>
Property Binding
使用 [ ] 語法將資料綁定到元素的 屬性 上,
通常用於修改元素的屬性值,
例如修改按鈕的文字 & 圖片的 URL 等…
<!-- 控制按鈕可不可以按的屬性 -->
<button [disabled]="isDisabled">{{ buttonLabel }}</button>
<!-- 綁定圖片 URL 屬性 -->
<img [src]="imageUrl" alt="Angular Logo" />
Event Binding
使用 ( ) 語法將元素的 事件 綁定到組件中的 方法 上,
通常用於 觸發特定的行為,
例如點擊按鈕時執行某個方法
<button (click)="onClick()">Click me!</button>
Two-way Binding
使用 [( )] 語法將元素的屬性和事件綁定到組件中的資料上, 實現資料的雙向同步.
<!-- [(ngModel)] 是 Angular 中用來實現雙向資料綁定的指令-->
<input [(ngModel)]="username" />
在 Component 中:
export class AppComponent {
username: string = "John";
}
當使用者在輸入框中輸入內容時, username 的值會自動更新. 反之, 當 username 的值在程式碼中改變時, 輸入框的內容也會自動更新.
總結
Angular Data Binding 提供了四種不同的綁定方式, 讓我們可以輕鬆地在 Component 和 Template 之間傳遞資料:
- **Interpolation (插值綁定) **:
{{ }}, 用於顯示資料 - **Property Binding (屬性綁定) **:
[ ], 用於設定元素屬性 - **Event Binding (事件綁定) **:
( ), 用於處理使用者事件 - **Two-way Binding (雙向綁定) **:
[( )], 用於資料的雙向同步
掌握這些綁定方式, 可以讓你在開發 Angular 應用時更加得心應手.