摘要：數據綁定是將應用程序UI或用戶界面綁定到模型的機制。使用數據綁定，用戶將能夠使用瀏覽器來操縱網站上存在的元素。
Web開發需要模型和視圖之間的數據同步。這些模型基本上包含數據值，而視圖則處理用戶看到的內容。因此，如果您想知道這在Angular中是如何發生的，這篇有關Angular數據綁定的文章將為您提供幫助。
下面提到的是此處討論的主題：
- What is Data Binding?
- Types of Data Binding in Angular
- One-way Data Binding
- Interpolation
- Property Binding
- Event Binding
- Two-way Data Binding
什么是數據綁定？
數據綁定是將應用程序UI或用戶界面綁定到模型的機制。使用數據綁定，用戶將能夠使用瀏覽器來操縱網站上存在的元素。因此，無論何時更改了某些變量，該特定更改都必須反映在文檔對象模型或DOM中。
在Angular中，數據綁定定義了組件與DOM之間的交互。從AngularJS一直到最新的Angular 9版本，數據綁定是所有Angular版本的一部分。
Angular中的數據綁定類型
Angular允許單向和雙向數據綁定。單向數據綁定是一種簡單的數據綁定類型，您可以在其中通過模型來操縱視圖。這意味着，對Typescript代碼進行的更改將反映在相應的HTML中。在Angular中，單向數據綁定是通過以下方式實現的：
- Interpolation or String Interpolation
- Property binding
- Event binding
另一方面，雙向數據綁定允許以如下方式同步數據：可以使用模型更新視圖，而可以使用視圖更新模型。這意味着您的應用程序將能夠在組件類及其模板之間共享信息。
單向數據綁定
在單向數據綁定中，數據僅沿一個方向流動，即從模型流向視圖。如前所述，Angular中的單向數據綁定可以為三種類型，即插值，屬性綁定和事件綁定。
Interpolation Binding
插值綁定用於從TypeScript代碼（即從組件到視圖）返回HTML輸出。在此，模板表達式在雙花括號內指定。通過插值，可以將字符串添加到HTML元素標簽之間以及屬性分配內的文本中。這些字符串是使用Template表達式計算的。
例子：
<h1>{{title}}</h1>
Learn <b> {{course}}
</b> with Edureka.
2 * 2 = {{2 * 2}}
<div><img src="{{image}}"></div>
此代碼的Typescript部分如下：
export class AppComponent { title = 'Databinding'; course ='Angular'; image = 'paste the url here' }
輸出：
component屬性在兩個花括號之間指定。Angular將用與該組件屬性關聯的字符串值替換該組件屬性。根據需要可以在不同的地方使用。角度將插值轉換為屬性綁定。
Angular還允許您配置插值定界符，並使用您選擇的內容代替兩個花括號。可以使用組件元數據中的插值選項來完成此操作。
模板表達式
模板表達式位於兩個大括號內，並且它們產生一個值。Angular將執行該表達式，然后將特定的表達式分配給綁定目標的屬性，例如HTML元素，組件或指令。
注意：插值括號之間的2 * 2是模板表達式。
屬性綁定
在“屬性綁定”中，值從組件的屬性流入目標元素的屬性。因此，屬性綁定不能用於從目標元素讀取或提取數據或調用屬於目標元素的方法。元素引發的事件可以通過事件綁定進行確認，事件綁定將在本文稍后介紹。
通常，可以說將使用屬性綁定將組件屬性值設置為元素屬性。
例子：
<h1>Property binding</h1> <div><img [src]="image"></div>
在上面的示例中，圖像元素的src屬性綁定到組件的圖像屬性。
Property binding and Interpolation
如果您已經注意到，可以看到插值和屬性綁定可以互換使用。看一下下面給出的示例對：
<h2>Interpolation</h2> <div><img src="{{image}}"></div> <h2>Property binding</h2> <div><img [src]="image"></div>
請注意，當需要將元素屬性設置為非字符串數據值時，必須使用屬性綁定而不是Interpolation。
事件綁定
使用事件綁定功能，您可以偵聽某些事件，例如鼠標移動，按鍵，點擊等。在Angular中，可以通過在等號（=）左側的常規方括號內指定目標事件名稱來實現事件綁定，以及右引號（“”）內的模板語句。
例子：
<div> <button (click)="goBack()">Go back</button> </div>
上例中的“ click ”是目標事件的名稱，“ goBack（）”是模板的語句。
輸出：
每當發生事件綁定時，Angular都會為目標事件設置事件處理程序。當該特定事件引發時，模板語句由處理程序執行。通常，接收者會涉及執行響應事件的操作的模板語句。在這里，binding用於傳達有關事件的信息。信息的這些數據值包括事件字符串，對象等。
Two-way Binding
Angular允許雙向數據綁定，這將允許您的應用程序在兩個方向上共享數據，即從組件到模板，反之亦然。這樣可以確保應用程序中存在的模型和視圖始終保持同步。雙向數據綁定將執行兩件事，即元素屬性的設置和偵聽元素更改事件。
雙向綁定的語法為– [（）}。如您所見，它是屬性綁定語法（即[]和事件綁定語法（））的組合。根據Angular的說法，此語法類似於“盒子里的香蕉”。
例子：
<label ><b>Name:</b>
<input [(ngModel)]="course.name" placeholder="name"/>
</label>
執行此代碼時，您將看到對模型或視圖的更改將導致對相應視圖和模型的更改。看一下下面的圖片，該圖片從視圖中將課程名稱從“ Python”更改為“ Pytho”：
本文分享自華為雲社區《什么是Angular數據綁定及其實現方式？》，原文作者：Yuchuan 。