Angular：都2021年了，你爲啥還沒用Angular

摘要：數據綁定是將應用程序UI或用戶界面綁定到模型的機制。使用數據綁定，用戶將可以使用瀏覽器來操縱網站上存在的元素。

本文分享自華爲雲社區《什麼是Angular數據綁定及其實現方式？》，原文做者：Yuchuan 。

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」：

點擊關注，第一時間瞭解華爲雲新鮮技術~