Data Binding 用途

Angular 的 Data Binding 可以幫助我們將應用程式的資料和 DOM 建立關聯,

實現動態資料更新 DOM 的效果

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" />

整理

參考