目標：建立可重複使用的 Card Component，將在主頁和部落格清單上使用

我想重新設計主頁以 Card Component 顯示當前的技術堆疊和感興趣的領域。此外，我想重新設計部落格存檔頁面 (Blog Archive) 以在網格中顯示部落格卡 (Blog Card)。

建立一個包含三個 ng-content 元素的元件。 第一個元素投影頁眉，中間的元素投影內容，最後一個元素投影頁腳。

產生 Card 元件

ng g c components/cardComponent -flat

更新範本以新增三個 ng-content 元素。

import { ChangeDetectionStrategy, Component } from '@angular/core';

@Component({
  selector: 'blog-card',
  standalone: true,
  template: `
    <div class="max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
      <div class="pt-2">
        <ng-content select="[header]" />
      </div>
      <div class="p-5">
        <ng-content>Default</ng-content>
      </div>
      <div class="pb-2">
        <ng-content select="[footer]" />
      </div>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CardComponent {}

<ng-content select="[header]" />

具有 header 屬性的元素投影到上面的 ng-content 元素。

<ng-content>Default</ng-content>

未命名的 ng-conent 元素是預設元素。任何元素都放在這裡。

<ng-content select="[footer]" />

具有 footer 屬性的元素投影到上面的 ng-content 元素。

它是一個簡單的元件，但是在部落格中的各個元件中都會用到它。

Github Repo:
https://github.com/railsstudent/ironman2024-analog-blog/blob/main/src/app/components/card.component.ts