Angular - 繫結及其型別

繫結是將模板中的目標連線到由所屬元件模型建立的模板表示式或模板語句的過程。當元件的模型發生變化時，模板表示式的輸出也會發生變化，並更新模板輸出（檢視）。

繫結型別

文字插值是最簡單的繫結形式，Angular 提供多種型別的繫結以應對不同的場景。繫結型別如下：

文字插值是將元件例項的模型連線到元件模板文字部分的過程。

讓我們考慮一個在元件中可用的屬性 name。

name: string = "John"

然後，可以使用文字插值在模板中使用 name，如下所示：

Name: {{ name }}

模板的最終輸出如下所示：

Name: John

讓我們在接下來的章節中詳細學習文字插值。

屬性繫結是將元件例項的模型連線到元件模板中（目標）HTML 元素的屬性的過程。

讓我們考慮一個在元件中可用的屬性 name。

name: string = "John"

屬性繫結可以寫成如下所示：

<input type="text" name="username" [attr.value]="name" />

模板的輸出如下所示：

<input type="text" name="username" value="John" />

讓我們在接下來的章節中詳細學習屬性繫結。

樣式繫結是將元件例項的模型連線到元件模板中（目標）HTML 元素的樣式屬性的過程。

讓我們考慮一個在元件中可用的屬性 myStyle。

myStyle: string = "background-color: blue"

類繫結可以寫成如下所示：

<button [style]="myStyle">Click here</button>

模板的輸出如下所示：

<button style="background-color: blue">Click here</button>

讓我們在接下來的章節中詳細學習樣式繫結。

類繫結是將元件例項的模型連線到元件模板中（目標）HTML 元素的類屬性的過程。

讓我們考慮一個在元件中可用的屬性 myClass。

myClass: string = "fancy-button"

類繫結可以寫成如下所示：

<button [class]="myClass">Click here</button>

模板的輸出如下所示：

<button class="fancy-button">Click here</button>

讓我們在接下來的章節中詳細學習類繫結概念。

屬性繫結是將元件例項的模型連線到元件模板中（目標）HTML 元素/其他元件的屬性的過程。Angular 將 HTML 元素的屬性作為屬性公開，並將屬性名稱轉換為駝峰式命名法。這將有助於透過屬性繫結連線 HTML 元素的所有屬性。

讓我們考慮一個在元件中可用的屬性 name。

name: string = "John"

屬性繫結可以寫成如下所示：

<input type="text" name="username" [value]="name" />

模板的輸出如下所示：

<input type="text" name="username" value="John" />

讓我們在接下來的章節中詳細學習屬性繫結概念。

事件繫結是將操作（模板語句/元件的方法）設定為（目標）HTML 元素/（另一個）元件事件的過程。

讓我們考慮一個在元件中可用的方法 myAction。

myAction() {
   // do some process
}

事件繫結可以寫成如下所示：

<button type="submit" (submit)="myAction">Click here</button>

一旦觸發 submit 事件，myAction() 方法將被呼叫並執行。

讓我們在接下來的章節中詳細學習事件繫結概念。

雙向資料繫結是屬性和事件繫結的組合，用於同步父元件和子元件之間的資料。

雙向資料繫結的示例格式如下：

// `parent-comp` template
<child-comp [(data)]="dataChange()" />

在這裡，資料將最初從父元件傳遞到子元件，然後，無論何時子元件中的資料更新，子元件都將觸發帶有更新資料的事件，父元件將透過事件回撥方法 dataChange() 捕獲資料。

讓我們在接下來的章節中詳細學習雙向資料繫結概念。

繫結提供了多個選項來將元件連線到其模板。這使開發人員能夠輕鬆建立豐富的前端應用程式。繫結減少了前端邏輯的複雜性，並使開發人員能夠在較短的時間內專注於開發更多功能。

列印頁面