GSS 技術部落格

在這個園地裡我們將從技術、專案管理、客戶對談面和大家分享我們多年的經驗，希望大家不管是喜歡或是有意見，都可以回饋給我們，讓我們有機會和大家對話並一起成長！
若有任何問題請來信：gss_crm@gss.com.tw

2 分鐘閱讀時間 (408 個字)

字體大小: + –

Angular # 14 - Components [2]

程式語言前端

2021/07/01, 週四

969 點擊

0 評論

前一篇提到了 component 的生命週期，這篇的重點會放在
- 巢狀 component 如何形成，有什麼特性
- Component 大致上可依其功用分成幾大類
Nesting Components
- 要形成巢狀 component 基本上有兩種方法:
  - 第一種方法是在另一個 component 中宣告其 selector
    - 前幾篇中提到 DashboardComponent 中有 SummaryComponent 就是此類
    - 此時 SummaryComponent 被稱作 View Child(很重要)
  - 第二種方法是在 component 允許被插入內容時:
    - 比方說我們有一個 UserProfileComponent，它的 template 定義如下:
```
  <user-avatar [avatar]="avatar"></user-avatar>
  <ng-content></ng-content>
```
      - 此時 UserAvatarComponent 就是 View Child
      - 任何被傳入 <ng-content></ng-content> 的 component 就稱作 Content Child
    - 承上例，如果我們在使用 UserProfileComponent 時如下:
```
  <user-profile [avatar]="user.avatar">
      <user-details [user]="user"></user-details>
  </user-profile>
```
      - 此時被傳入 <ng-content></ng-content> 的是 UserDetailsComponent
      - UserDetailsComponent 在這就是 Content Child
- View Child 與 Content Child 的差異
  - 其實就只差在他們的 selector 被用在哪
  - Component 本身的設計與其是哪一種 Child 無關
  - 大部份的時候 component 建議是解耦的，但某些特殊狀況使得兩個 component 本身就具有高關聯性，那也只能這樣(e.g. Tab & Tabs, Table & TableRow & TableColumn)
Component 的分類
- 就技術的角度來說，其實只有一種 Component
- 就 component 的角色來看，可以概略區分為以下四種
  - App component
    - ng new 產出來的那個，整支 Angular app 只會有一個
  - 顯示用 component
    - Stateless，完全不維護任何狀態
    - 單純顯示接收到的資料，重用性極高
  - 資料 component
    - 幫助 App 取得外部資料
  - 路由 component
    - Router 導到的 component
小結
- 這篇感覺單純多了，主要是一些設計相關的理念
  - 下一篇將針對上面提到的四類 Component 再作進一步的說明