Web開(kāi)發(fā)需要模型和視圖之間的數(shù)據(jù)同步。這些模型基本上包含數(shù)據(jù)值，而視圖則處理用戶(hù)看到的內(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或用戶(hù)界面綁定到模型的機(jī)制。使用數(shù)據(jù)綁定，用戶(hù)將能夠使用瀏覽器來(lái)操縱網(wǎng)站上存在的元素。因此，無(wú)論何時(shí)更改了某些變量，該特定更改都必須反映在文檔對(duì)象模型或DOM中。

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

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

Angular允許單向和雙向數(shù)據(jù)綁定。單向數(shù)據(jù)綁定是一種簡(jiǎn)單的數(shù)據(jù)綁定類(lèi)型，您可以在其中通過(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件類(lèi)及其模板之間共享信息。

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

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

Interpolation Binding

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

例子：

{{title}}

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

Property binding and Interpolation

如果您已經(jīng)注意到，可以看到插值和屬性綁定可以互換使用。看一下下面給出的示例對(duì)：

Interpolation

Property binding

請(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)事件名稱(chēng)來(lái)實(shí)現(xiàn)事件綁定，以及右引號(hào)（“”）內(nèi)的模板語(yǔ)句。

例子：

上例中的“?click?”是目標(biāo)事件的名稱(chēng)，“?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ǔ)法類(lèi)似于“盒子里的香蕉”。

例子：

Name:

執(zhí)行此代碼時(shí)，您將看到對(duì)模型或視圖的更改將導(dǎo)致對(duì)相應(yīng)視圖和模型的更改。看一下下面的圖片，該圖片從視圖中將課程名稱(chēng)從“ Python”更改為“ Pytho”：

這使我們到“Angular Data Binding”文章的結(jié)尾。希望這對(duì)您有幫助，并能為您帶來(lái)更多價(jià)值。

Angular web前端

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶(hù)投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。