Template 優化與 Getter 使用

為什麼要優化？

原始寫法：

<img [src]="'assets/users/' + {{this.selectedUser.avatar}}" alt="{{selectedUser.name}}">

問題：

1. Template 邏輯太複雜

2. 字串拼接在 HTML 中不易維護

3. 混用了插值語法 {{}} 和屬性綁定 []

優化後寫法

component.html：

<img [src]="imagePath" [alt]="selectedUser.name">

component.ts：

export class UserComponent {
  get imagePath() {
    return 'assets/users/' + this.selectedUser.avatar;
  }
}

優點

1. 關注點分離

   • HTML 專注於結構

   • 邏輯移至 Component

2. 可維護性

   • 路徑邏輯集中管理

   • 易於修改和測試

3. 可重用性

   • getter 可在其他地方重用

   • 邏輯統一，避免重複代碼

4. 程式碼更簡潔

   • Template 更容易閱讀

   • 減少模板語法混用