Angular 屬性綁定的最佳實踐

屬性綁定的最佳實踐

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

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

避免副作用

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

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

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

作為一項最佳實踐，請只使用屬性和僅會返回值的方法。

返回合適的類型

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

傳入字符串

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

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

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

@Input() childItem = '';

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

parentItem = 'lamp';

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

傳入一個對象

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

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

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

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

注意 ?Item ?是一個有兩個屬性的對象。一個是 ?id?，一個是 ?name?。

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

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

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

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