Angular 屬性綁定的最佳實(shí)踐

屬性綁定的最佳實(shí)踐

通過(guò)遵循一些指導(dǎo)原則，你可以使用屬性綁定來(lái)幫助你最大限度地減少錯(cuò)誤并讓代碼保持可讀性。

本章包含代碼片段的工作實(shí)例參閱現(xiàn)場(chǎng)演練 / 下載范例。

避免副作用

模板表達(dá)式的計(jì)算應(yīng)該沒(méi)有明顯的副作用。使用模板表達(dá)式的語(yǔ)法來(lái)幫你避免副作用。通常，正確的語(yǔ)法會(huì)阻止你為屬性綁定表達(dá)式中的任何東西賦值。該語(yǔ)法還會(huì)阻止你使用遞增和遞減運(yùn)算符。

產(chǎn)生副作用的一個(gè)例子

如果你的表達(dá)式改變了你所綁定的其它東西的值，那么這種更改就會(huì)產(chǎn)生副作用。Angular 可能顯示也可能不顯示更改后的值。如果 Angular 確實(shí)檢測(cè)到了這個(gè)變化，就會(huì)拋出一個(gè)錯(cuò)誤。

作為一項(xiàng)最佳實(shí)踐，請(qǐng)只使用屬性和僅會(huì)返回值的方法。

返回合適的類型

模板表達(dá)式應(yīng)該求值為目標(biāo)屬性所期望的值類型。比如，如果目標(biāo)屬性需要一個(gè)字符串，就返回一個(gè)字符串；如果需要一個(gè)數(shù)字，就返回一個(gè)數(shù)字；如果需要一個(gè)對(duì)象，就返回一個(gè)對(duì)象。

傳入字符串

在下面的例子中，?ItemDetailComponent ?的 ?childItem ?屬性需要一個(gè)字符串。

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

你可以通過(guò)查看 ?ItemDetailComponent ?來(lái)確認(rèn)這種預(yù)期，其中的 ?@Input()? 類型為 ?string ?：

@Input() childItem = '';

?AppComponent ?中的 ?parentItem ?是一個(gè)字符串，這意味著 ?[childItem]="parentItem"? 中的 ?parentItem ?應(yīng)該求值為一個(gè)字符串。

parentItem = 'lamp';

如果 ?parentItem ?是其它類型的，你同樣應(yīng)該把 ?childItem ?這個(gè) ?@Input()? 指定為那個(gè)類型。

傳入一個(gè)對(duì)象

在這個(gè)例子中，?ItemListComponent ?是 ?AppComponent ?的子組件，其 ?items ?屬性需要一個(gè)對(duì)象數(shù)組。

<app-item-list [items]="currentItems"></app-item-list>

在 ?ItemListComponent ?中，?@Input()? ?items ?的類型為 ?Item[]?。

@Input() items: Item[] = [];

注意 ?Item ?是一個(gè)有兩個(gè)屬性的對(duì)象。一個(gè)是 ?id?，一個(gè)是 ?name?。

export interface Item {
  id: number;
  name: string;
}

在 ?app.component.ts? 中，?currentItems ?是一個(gè)對(duì)象數(shù)組，與 ?items.ts? 中的 ?Item ?對(duì)象具有相同的形態(tài)：有一個(gè) ?id?，有一個(gè) ?name?。

currentItems = [{
  id: 21,
  name: 'phone'
}];

通過(guò)提供一個(gè)形態(tài)相同的對(duì)象，你就可以滿足 Angular 在計(jì)算表達(dá)式 ?currentItems ?時(shí)對(duì) ?items ?的期待。