屬性繫結的最佳實踐
Property binding best practices
透過遵循一些指導原則,你可以使用屬性繫結來幫助你最大限度地減少錯誤並讓程式碼保持可讀性。
By following a few guidelines, you can use property binding in a way that helps you minimize bugs and keep your code readable.
避免副作用
Avoid side effects
範本表示式的計算應該沒有明顯的副作用。使用範本表示式的語法來幫你避免副作用。通常,正確的語法會阻止你為屬性繫結表示式中的任何東西賦值。該語法還會阻止你使用遞增和遞減運算子。
Evaluation of a template expression should have no visible side effects. Use the syntax for template expressions to help avoid side effects. In general, the correct syntax prevents you from assigning a value to anything in a property binding expression. The syntax also prevents you from using increment and decrement operators.
產生副作用的一個例子
An example of producing side effects
如果你的表示式改變了你所繫結的其它東西的值,那麼這種更改就會產生副作用。 Angular 可能顯示也可能不顯示更改後的值。如果 Angular 確實檢測到了這個變化,就會丟擲一個錯誤。
If you had an expression that changed the value of something else that you were binding to, that change of value would be a side effect. Angular might or might not display the changed value. If Angular does detect the change, it throws an error.
作為一項最佳實踐,請只使用屬性和僅會返回值的方法。
As a best practice, use only properties and methods that return values.
返回合適的型別
Return the proper type
範本表示式應該求值為目標屬性所期望的值型別。例如,如果目標屬性需要一個字串,就返回一個字串;如果需要一個數字,就返回一個數字;如果需要一個物件,就返回一個物件。
A template expression should evaluate to the type of value that the target property expects. For example, return a string if the target property expects a string, a number if it expects a number, or an object if it expects an object.
傳入字串
Passing in a string
在下面的例子中,ItemDetailComponent
的 childItem
屬性需要一個字串。
In the following example, the childItem
property of the ItemDetailComponent
expects a string.
<app-item-detail [childItem]="parentItem"></app-item-detail>
你可以透過檢視 ItemDetailComponent
來確認這種預期,其中的 @Input()
型別為 string
:
You can confirm this expectation by looking in the ItemDetailComponent
where the @Input()
type is string
:
@Input() childItem = '';
AppComponent
中的 parentItem
是一個字串,這意味著 [childItem]="parentItem"
中的 parentItem
應該求值為一個字串。
The parentItem
in AppComponent
is a string, which means that the expression, parentItem
within [childItem]="parentItem"
, evaluates to a string.
parentItem = 'lamp';
如果 parentItem
是其它型別的,你同樣應該把 childItem
這個 @Input()
指定為那個型別。
If parentItem
were some other type, you would need to specify childItem
@Input()
as that type as well.
傳入一個物件
Passing in an object
在這個例子中, ItemListComponent
是 AppComponent
的子元件,其 items
屬性需要一個物件陣列。
In this example, ItemListComponent
is a child component of AppComponent
and the items
property expects an array of objects.
<app-item-list [items]="currentItems"></app-item-list>
在 ItemListComponent
中,@Input()
items
的型別為 Item[]
。
In the ItemListComponent
the @Input()
, items
, has a type of Item[]
.
@Input() items: Item[] = [];
注意 Item
是一個有兩個屬性的物件。一個是 id
,一個是 name
。
Notice that Item
is an object that it has two properties; an id
and a name
.
export interface Item {
id: number;
name: string;
}
在 app.component.ts
中,currentItems
是一個物件陣列,與 items.ts
中的 Item
物件具有相同的形態:有一個 id
,有一個 name
。
In app.component.ts
, currentItems
is an array of objects in the same shape as the Item
object in items.ts
, with an id
and a name
.
currentItems = [{
id: 21,
name: 'phone'
}];
透過提供一個形態相同的物件,你就可以滿足 Angular 在計算表示式 currentItems
時對 items
的期待。
By supplying an object in the same shape, you satisfy the expectations of items
when Angular evaluates the expression currentItems
.