前言

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或使用者介面繫結到模型的機制。使用資料繫結，使用者將能夠使用瀏覽器來操縱

在Angular中，資料繫結定www.cppcns.com義了元件與DOM之間的互動。從Angularjs一直到最新的Angular 9版本，資料繫結是所有Angular版本的一部分。

Angular中的數oCdap據繫結型別

Angular允許單向和雙向資料繫結。單向資料繫結是一種簡單的資料繫結型別，您可以在其中通過模型來操縱檢視。這意味著，對Typescript程式碼進行的更改將反映在相應的HTML中。在Angular中，單向資料繫結是通過以下方式實現的：

• Interpolation or String Interpolation
• Property binding
• Event binding

另一方面，雙向資料繫結允許以如下方式同步資料：可以使用模型更新檢視，而可以使用檢視更新模型。這意味著您的應用程式將能夠在元件類及其模板之間共享資訊。

單向資料繫結

在單向資料繫結中，資料僅沿一個方向流動，即從模型流向檢視。如前所述，Angular中的單向資料繫結可以為三種類型，即插值，屬性繫結和事件繫結。

Interpolation Binding

插值繫結用於從TypeScript程式碼（即從元件到檢視）返回HTML輸出。在此，模板表示式在雙花括號內指定。通過插值，可以將字串新增到HTML元素標籤之間以及屬性分配內的文字中。這些字串是使用Template表示式計算的。

例子：

<h1>{{title}}</h1>
 
Learn  {{course}}
 with Edureka.
 
2 * 2 = {{2 * 2}}
 
<div><img src程式設計客棧="{{image}}"></div>

此程式碼http://www.cppcns.com的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 >Name:
        <input [(ngModel)]="course.name" placeholder="name"/>
</label>

執行此程式碼時，您將看到對模型或檢視的更改將導致對相應檢視和模型的更改。看一下下面的圖片，該圖片從檢視中將課程名稱從“ python”更改為“ Pytho”：

以上就是詳解Angular資料繫結及其實現方式的詳細內容，更多關於Angular資料繫結及其實現方式的資料請關注我們其它相關文章！