Angular 中的屬性繫結

Angular 中的屬性繫結讓你可以設定 HTML 元素、Angular 元件等各種目標的屬性值。

使用屬性繫結，你可以動態設定屬性和特性值。你可以做很多事，例如切換按鈕功能、以程式方式設定圖片路徑，以及在元件之間共享值。

NOTE: 在核心概念指南中進一步了解如何設定動態屬性和特性。

在這個練習中，你將學習如何在範本中使用屬性繫結。

要繫結到元素的特性，請把特性名稱用方括號括起來。範例如下：

<img alt="photo" [src]="imageURL" />

在本範例中，src 特性的值會繫結到類別屬性 imageURL。imageURL 的值是什麼，img 標籤的 src 特性就會被設為什麼。

  1. 加上名為 isEditable 的屬性

    更新 app.ts 中的程式碼，為 App 類別加上一個名為 isEditable 的屬性，初始值設為 true。

    export class App {
  isEditable = true;
}

  2. 繫結到 contentEditable

    接著，使用 [] 語法，把 div 的 contentEditable 特性繫結到 isEditable 屬性。

    @Component({
  ...
  template: `<div [contentEditable]="isEditable"></div>`,
})

這個 div 現在可以編輯了。做得好 👍

屬性繫結是 Angular 眾多強大功能之一。如果你想了解更多，請查看 Angular 文件。