前言

Web開(kāi)發(fā)需要模型和視圖之間的數(shù)據(jù)同步。這些模型基本上包含數(shù)據(jù)值，而視圖則處理用戶看到的內(nèi)容。因此，如果您想知道這在Angular中是如何發(fā)生的，這篇有關(guān)Angular數(shù)據(jù)綁定的文章將為您提供幫助。

下面提到的是此處討論的主題：

• What is Data Binding?
• Types of Data Binding in Angular
• One-way Data Binding Interpolation Property Binding Event Binding
• Two-way Data Binding

什么是數(shù)據(jù)綁定？

數(shù)據(jù)綁定是將應(yīng)用程序UI或用戶界面綁定到模型的機(jī)制。使用數(shù)據(jù)綁定，用戶將能夠使用瀏覽器來(lái)操縱網(wǎng)站上存在的元素。因此，無(wú)論何時(shí)更改了某些變量，該特定更改都必須反映在文檔對(duì)象模型或DOM中。

在Angular中，數(shù)據(jù)綁定定義了組件與DOM之間的交互。從AngularJS一直到最新的Angular 9版本，數(shù)據(jù)綁定是所有Angular版本的一部分。

Angular中的數(shù)據(jù)綁定類型

Angular允許單向和雙向數(shù)據(jù)綁定。單向數(shù)據(jù)綁定是一種簡(jiǎn)單的數(shù)據(jù)綁定類型，您可以在其中通過(guò)模型來(lái)操縱視圖。這意味著，對(duì)Typescript代碼進(jìn)行的更改將反映在相應(yīng)的HTML中。在Angular中，單向數(shù)據(jù)綁定是通過(guò)以下方式實(shí)現(xiàn)的：

• Interpolation or String Interpolation
• Property binding
• Event binding

另一方面，雙向數(shù)據(jù)綁定允許以如下方式同步數(shù)據(jù)：可以使用模型更新視圖，而可以使用視圖更新模型。這意味著您的應(yīng)用程序?qū)⒛軌蛟诮M件類及其模板之間共享信息。

單向數(shù)據(jù)綁定

在單向數(shù)據(jù)綁定中，數(shù)據(jù)僅沿一個(gè)方向流動(dòng)，即從模型流向視圖。如前所述，Angular中的單向數(shù)據(jù)綁定可以為三種類型，即插值，屬性綁定和事件綁定。

Interpolation Binding

插值綁定用于從TypeScript代碼（即從組件到視圖）返回HTML輸出。在此，模板表達(dá)式在雙花括號(hào)內(nèi)指定。通過(guò)插值，可以將字符串添加到HTML元素標(biāo)簽之間以及屬性分配內(nèi)的文本中。這些字符串是使用Template表達(dá)式計(jì)算的。

例子：

<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屬性在兩個(gè)花括號(hào)之間指定。Angular將用與該組件屬性關(guān)聯(lián)的字符串值替換該組件屬性。根據(jù)需要可以在不同的地方使用。角度將插值轉(zhuǎn)換為屬性綁定。

Angular還允許您配置插值定界符，并使用您選擇的內(nèi)容代替兩個(gè)花括號(hào)。可以使用組件元數(shù)據(jù)中的插值選項(xiàng)來(lái)完成此操作。

模板表達(dá)式

模板表達(dá)式位于兩個(gè)大括號(hào)內(nèi)，并且它們產(chǎn)生一個(gè)值。Angular將執(zhí)行該表達(dá)式，然后將特定的表達(dá)式分配給綁定目標(biāo)的屬性，例如HTML元素，組件或指令。

注意：插值括號(hào)之間的2 * 2是模板表達(dá)式。

屬性綁定

在“屬性綁定”中，值從組件的屬性流入目標(biāo)元素的屬性。因此，屬性綁定不能用于從目標(biāo)元素讀取或提取數(shù)據(jù)或調(diào)用屬于目標(biāo)元素的方法。元素引發(fā)的事件可以通過(guò)事件綁定進(jìn)行確認(rèn)，事件綁定將在本文稍后介紹。

通常，可以說(shuō)將使用屬性綁定將組件屬性值設(shè)置為元素屬性。

例子：

<h1>Property binding</h1>
<div><img [src]="image"></div>

在上面的示例中，圖像元素的src屬性綁定到組件的圖像屬性。

Property binding and Interpolation

如果您已經(jīng)注意到，可以看到插值和屬性綁定可以互換使用?？匆幌孪旅娼o出的示例對(duì)：

<h2>Interpolation</h2>
 
<div><img src="{{image}}"></div>
 
<h2>Property binding</h2>
 
<div><img [src]="image"></div>

請(qǐng)注意，當(dāng)需要將元素屬性設(shè)置為非字符串?dāng)?shù)據(jù)值時(shí)，必須使用屬性綁定而不是Interpolation。

事件綁定

使用事件綁定功能，您可以偵聽(tīng)某些事件，例如鼠標(biāo)移動(dòng)，按鍵，點(diǎn)擊等。在Angular中，可以通過(guò)在等號(hào)（=）左側(cè)的常規(guī)方括號(hào)內(nèi)指定目標(biāo)事件名稱來(lái)實(shí)現(xiàn)事件綁定，以及右引號(hào)（“”）內(nèi)的模板語(yǔ)句。

例子：

<div>
  <button (click)="goBack()">Go back</button>
</div>

上例中的“ click ”是目標(biāo)事件的名稱，“ goBack（）”是模板的語(yǔ)句。

輸出：

每當(dāng)發(fā)生事件綁定時(shí)，Angular都會(huì)為目標(biāo)事件設(shè)置事件處理程序。當(dāng)該特定事件引發(fā)時(shí)，模板語(yǔ)句由處理程序執(zhí)行。通常，接收者會(huì)涉及執(zhí)行響應(yīng)事件的操作的模板語(yǔ)句。在這里，binding用于傳達(dá)有關(guān)事件的信息。信息的這些數(shù)據(jù)值包括事件字符串，對(duì)象等。

Two-way Binding

Angular允許雙向數(shù)據(jù)綁定，這將允許您的應(yīng)用程序在兩個(gè)方向上共享數(shù)據(jù)，即從組件到模板，反之亦然。這樣可以確保應(yīng)用程序中存在的模型和視圖始終保持同步。雙向數(shù)據(jù)綁定將執(zhí)行兩件事，即元素屬性的設(shè)置和偵聽(tīng)元素更改事件。

雙向綁定的語(yǔ)法為– [（）}。如您所見(jiàn)，它是屬性綁定語(yǔ)法（即[]和事件綁定語(yǔ)法（））的組合。根據(jù)Angular的說(shuō)法，此語(yǔ)法類似于“盒子里的香蕉”。

例子：

<label ><b>Name:</b>
        <input [(ngModel)]="course.name" placeholder="name"/>
</label>

執(zhí)行此代碼時(shí)，您將看到對(duì)模型或視圖的更改將導(dǎo)致對(duì)相應(yīng)視圖和模型的更改?？匆幌孪旅娴膱D片，該圖片從視圖中將課程名稱從“ Python”更改為“ Pytho”：

以上就是詳解Angular數(shù)據(jù)綁定及其實(shí)現(xiàn)方式的詳細(xì)內(nèi)容，更多關(guān)于Angular數(shù)據(jù)綁定及其實(shí)現(xiàn)方式的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！