隨記

Week 07 · Day 03 — Content Projection（內容投影）

學習目標

  • 用 <ng-content> 建立可重用容器元件
  • 讓使用者能填入自訂內容
  • 建立可共用的 Card 元件

重點

【角標籤 ng-content - 讓父元件把內容「塞進」子元件內特定位置 - 適合做「外框/容器」型元件

建立可重用 Card 

@Component({
  selector: 'app-card',
  template: `
    <div class="card">
      <ng-content></ng-content>
    </div>
  `
})
export class CardComponent {}

父元件使用 

<app-card>
  <h2>Title</h2>
  <p>Content here</p>
</app-card>
- 裡面的 <h2>、<p> 會被投影到 <ng-content> 的位置

手具優點 - 元件只負責「外框 + 樣式」 - 內容完全由使用方決定 → 高重用性

多插槽（進階） 

<div class="card">
  <header><ng-content select="[card-title]"></ng-content></header>
  <main><ng-content></ng-content></main>
</div>
- select="[card-title]" 只投影帶該屬性的內容

實作

  1. 建立 CardComponent 用 <ng-content>
  2. 在父元件放入標題與內文
  3. （加分）用 select 做標題/內文分離插槽

作業

  • 用 <ng-content> 建立 Card 容器
  • 在 Card 中放入自訂內容
  • （加分）用 select 做多插槽投影