屬性綁定

Angular 中的屬性綁定可幫助你設(shè)置 HTML 元素或指令的屬性值。使用屬性綁定，可以執(zhí)行諸如切換按鈕、以編程方式設(shè)置路徑，以及在組件之間共享值之類的功能。

包含本指南中的代碼片段的工作示例，請(qǐng)參閱現(xiàn)場(chǎng)演練 / 下載范例。

先決條件

為了充分理解屬性綁定，你應(yīng)該熟悉以下內(nèi)容：

• 組件基礎(chǔ)
• 模板基礎(chǔ)
• 綁定語(yǔ)法

了解數(shù)據(jù)流

屬性綁定在單一方向上將值從組件的屬性送到目標(biāo)元素的屬性。

綁定到屬性

要綁定到元素的屬性，請(qǐng)將其括在方括號(hào) ?[]? 內(nèi)，該括號(hào)會(huì)將屬性標(biāo)為目標(biāo)屬性。目標(biāo)屬性就是你要對(duì)其進(jìn)行賦值的 DOM 屬性。例如，以下代碼中的目標(biāo)屬性是 img 元素的 ?src ?屬性。

<img [src]="itemImageUrl">

在大多數(shù)情況下，目標(biāo)的名稱就是 Property 的名稱，哪怕它看起來(lái)像 Attribute 的名稱。在這個(gè)例子中，?src ?就是 ?<img>? 元素的 Property 名稱。

方括號(hào) ?[]? 使 Angular 將等號(hào)的右側(cè)看作動(dòng)態(tài)表達(dá)式進(jìn)行求值。如果不使用方括號(hào)，Angular 就會(huì)將右側(cè)視為字符串字面量并將此屬性設(shè)置為該靜態(tài)值。

<app-item-detail childItem="parentItem"></app-item-detail>

省略方括號(hào)就會(huì)渲染出字符串 ?parentItem?，而不是 ?parentItem ?的值。

將元素的屬性設(shè)置為組件屬性的值

要將 ?<img>? 的 ?src ?屬性綁定到組件的屬性，請(qǐng)將目標(biāo) ?src ?放在方括號(hào)中，后跟等號(hào)，然后是組件的屬性。在這里組件的屬性是 ?itemImageUrl?。

<img [src]="itemImageUrl">

在組件類 ?AppComponent ?中聲明 ?itemImageUrl ?屬性。

itemImageUrl = '../assets/phone.png';

colspan 和 colSpan

最容易混淆的地方是 ?colspan ?這個(gè) Attribute 和 ?colSpan ?這個(gè) Property。請(qǐng)注意，這兩個(gè)名稱只有一個(gè)字母的大小寫不同。

如果你這樣寫：

<tr><td colspan="{{1 + 1}}">Three-Four</td></tr>

你會(huì)收到此錯(cuò)誤：

Template parse errors:
Can't bind to 'colspan' because it isn't a known built-in property

如消息中所示，?<td>? 元素沒(méi)有 ?colspan ?Property。這是正確的，因?yàn)?nbsp;?colspan ?是一個(gè) Attribute — ?colSpan?（帶大寫 ?S?）才是相應(yīng)的 Property。插值和 Property 綁定只能設(shè)置 Property，不能設(shè)置 Attribute。

相反，你應(yīng)該使用 Property 綁定并將其編寫為：

<!-- Notice the colSpan property is camel case -->
<tr><td [colSpan]="1 + 1">Three-Four</td></tr>

另一個(gè)示例是在組件說(shuō)它自己 ?isUnchanged ?時(shí)禁用按鈕：

<!-- Bind button disabled state to `isUnchanged` property -->
<button [disabled]="isUnchanged">Disabled Button</button>

另一個(gè)是設(shè)置指令的屬性：

<p [ngClass]="classes">[ngClass] binding to the classes property making this blue</p>

還有一個(gè)是設(shè)置自定義組件的模型屬性，這是父組件和子組件進(jìn)行通信的一種好辦法：

<app-item-detail [childItem]="parentItem"></app-item-detail>

切換按鈕功能

若要根據(jù)布爾值禁用按鈕的功能，請(qǐng)將 DOM 的 ?disabled ?Property 設(shè)置為類中的源屬性（可能為 ?true ?或 ?false?）。

<!-- Bind button disabled state to `isUnchanged` property -->
<button [disabled]="isUnchanged">Disabled Button</button>

由于 ?AppComponent ?中屬性 ?isUnchanged ?的值是 ?true?，Angular 會(huì)禁用該按鈕。

isUnchanged = true;

設(shè)置指令的屬性

要設(shè)置指令的屬性，請(qǐng)將指令放在方括號(hào)中，例如 ?[ngClass]?，后跟等號(hào)和一個(gè)源屬性。在這里，這個(gè)源屬性的值是 ?classes ?。

<p [ngClass]="classes">[ngClass] binding to the classes property making this blue</p>

要使用該屬性，必須在組件類中聲明它，在這里是 ?AppComponent?。其 ?classes ?的值是 ?special ?。

classes = 'special';

Angular 會(huì)將 ?special ?類應(yīng)用到 ?<p>? 元素，以便你可以通過(guò) ?special ?來(lái)應(yīng)用 CSS 樣式。

在組件之間綁定值

要設(shè)置自定義組件的模型屬性，請(qǐng)將目標(biāo)屬性（此處為 ?childItem?）放在方括號(hào) ?[]? 中，其后跟著等號(hào)與源屬性。在這里，這個(gè)源屬性是 ?parentItem ?。

<app-item-detail [childItem]="parentItem"></app-item-detail>

要使用目標(biāo)和源屬性，必須在它們各自的類中聲明它們。

在組件類（這里是 ?ItemDetailComponent?）中聲明 ?childItem ?的目標(biāo)。

例如，以下代碼在其組件類（這里是 ?ItemDetailComponent?）中聲明了 ?childItem ?的目標(biāo)。

然后，代碼包含一個(gè)帶有 ?@Input()? 裝飾器的 ?childItem ?屬性，這樣才能讓數(shù)據(jù)流入其中。

@Input() childItem = '';

接下來(lái)，代碼在其組件類（這里是 ?AppComponent?）中聲明屬性 ?parentItem?。在這個(gè)例子中， ?childItem ?的類型為 ?string ?，因此 ?parentItem ?也必須為字符串。在這里，?parentItem ?的字符串值為 ?lamp?。

parentItem = 'lamp';

這種配置方式下，?<app-item-detail>? 的視圖使用來(lái)自 ?childItem ?的值 ?lamp?。

屬性綁定與安全性

屬性綁定可以幫助確保內(nèi)容的安全。例如，考慮以下惡意內(nèi)容。

evilTitle = 'Template <script>alert("evil never sleeps")</script> Syntax';

組件模板對(duì)內(nèi)容進(jìn)行插值，如下所示：

<p><span>"{{evilTitle}}" is the <i>interpolated</i> evil title.</span></p>

瀏覽器不會(huì)處理 HTML，而是原樣顯示它，如下所示。

"Template <script>alert("evil never sleeps")</script> Syntax" is the interpolated evil title.

Angular 不允許帶有 ?<script>? 標(biāo)記的 HTML，既不能用于插值也不能用于屬性綁定，這樣就會(huì)阻止運(yùn)行 JavaScript。

但是，在以下示例中，Angular 在顯示值之前會(huì)先對(duì)它們進(jìn)行無(wú)害化處理。

<!--
 Angular generates a warning for the following line as it sanitizes them
 WARNING: sanitizing HTML stripped some content (see https://g.co/ng/security#xss).
-->
 <p>"<span [innerHTML]="evilTitle"></span>" is the <i>property bound</i> evil title.</p>

插值處理 ?<script>? 標(biāo)記的方式與屬性綁定的方式不同，但這兩種方法都可以使內(nèi)容無(wú)害。以下是經(jīng)過(guò)無(wú)害化處理的 ?evilTitle ?示例的瀏覽器輸出。

"Template Syntax" is the property bound evil title.

屬性綁定和插值

通常，插值和屬性綁定可以達(dá)到相同的結(jié)果。以下綁定會(huì)做相同的事。

<p><img src="{{itemImageUrl}}"> is the <i>interpolated</i> image.</p>
<p><img [src]="itemImageUrl"> is the <i>property bound</i> image.</p>

<p><span>"{{interpolationTitle}}" is the <i>interpolated</i> title.</span></p>
<p>"<span [innerHTML]="propertyTitle"></span>" is the <i>property bound</i> title.</p>

將數(shù)據(jù)值渲染為字符串時(shí)，可以使用任一種形式，只是插值形式更易讀。但是，要將元素屬性設(shè)置為非字符串?dāng)?shù)據(jù)值時(shí)，必須使用屬性綁定。