Angular 屬性綁定

屬性綁定

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

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

先決條件

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

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

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

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

綁定到屬性

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

<img [src]="itemImageUrl">

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

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

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

省略方括號就會渲染出字符串 ?parentItem?，而不是 ?parentItem ?的值。

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

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

<img [src]="itemImageUrl">

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

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

colspan 和 colSpan

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

如果你這樣寫：

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

你會收到此錯誤：

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

如消息中所示，?<td>? 元素沒有 ?colspan ?Property。這是正確的，因為 ?colspan ?是一個 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>

另一個示例是在組件說它自己 ?isUnchanged ?時禁用按鈕：

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

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

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

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

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

切換按鈕功能

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

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

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

isUnchanged = true;

設(shè)置指令的屬性

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

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

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

classes = 'special';

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

在組件之間綁定值

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

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

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

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

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

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

@Input() childItem = '';

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

parentItem = 'lamp';

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

屬性綁定與安全性

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

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

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

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

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

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

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

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

<!--
 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)容無害。以下是經(jīng)過無害化處理的 ?evilTitle ?示例的瀏覽器輸出。

"Template Syntax" is the property bound evil title.

屬性綁定和插值

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

<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è)置為非字符串?dāng)?shù)據(jù)值時，必須使用屬性綁定。