屬性繫結的最佳實踐link

Property binding best practiceslink

透過遵循一些指導原則，你可以使用屬性繫結來幫助你最大限度地減少錯誤並讓程式碼保持可讀性。

By following a few guidelines, you can use property binding in a way that helps you minimize bugs and keep your code readable.

避免副作用link

Avoid side effectslink

範本表示式的計算應該沒有明顯的副作用。使用範本表示式的語法來幫你避免副作用。通常，正確的語法會阻止你為屬性繫結表示式中的任何東西賦值。該語法還會阻止你使用遞增和遞減運算子。

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.

產生副作用的一個例子link

An example of producing side effectslink

如果你的表示式改變了你所繫結的其它東西的值，那麼這種更改就會產生副作用。 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.

返回合適的型別link

Return the proper typelink

範本表示式應該求值為目標屬性所期望的值型別。例如，如果目標屬性需要一個字串，就返回一個字串；如果需要一個數字，就返回一個數字；如果需要一個物件，就返回一個物件。

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.

傳入字串link

Passing in a stringlink

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

In the following example, the childItem property of the ItemDetailComponent expects a string.

      
        content_copy
      
      <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:

      
        content_copy
      
      @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.

      
        content_copy
      
      parentItem = 'lamp';
    

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

If parentItem were some other type, you would need to specify childItem @Input() as that type as well.

傳入一個物件link

Passing in an objectlink

在這個例子中， ItemListComponent 是 AppComponent 的子元件，其 items 屬性需要一個物件陣列。

In this example, ItemListComponent is a child component of AppComponent and the items property expects an array of objects.

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

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

In the ItemListComponent the @Input(), items, has a type of Item[].

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

注意 Item 是一個有兩個屬性的物件。一個是 id，一個是 name。

Notice that Item is an object that it has two properties; an id and a name.

      
        content_copy
      
      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.

      
        content_copy
      
      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.