如何复用接收不同输入对象的Angular卡片组件？

核心思路 #

通过定义统一的渲染数据结构，将不同类型的输入（Article/Event）映射为该结构，让卡片组件只处理标准化后的数据，实现复用。

步骤实现 #

1. 定义统一的卡片数据接口

根据卡片渲染需求，提取/映射不同对象的字段到统一类型：

// 统一卡片项类型，可根据实际渲染需求调整字段
interface CardItem {
  source: string;       // Article的author / Event的organizer
  description: string;  // Article的blurb / Event的自定义描述
  location?: string;    // Event专属字段
  rsvpRequired?: boolean; // Event专属字段
}

// 原有的Article和Event接口（假设你已定义）
interface Article {
  author: string;
  blurb: string;
  // 其他原有字段...
}

interface Event {
  organizer: string;
  location: string;
  rsvpRequired: boolean;
  // 其他原有字段...
}

2. 在卡片组件中实现归一化转换

通过@Input()的setter监听输入数据，自动转换为统一类型：

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

@Component({
  selector: 'app-reusable-card',
  templateUrl: './reusable-card.component.html'
})
export class ReusableCardComponent {
  @Input() headline: string;
  // 存储归一化后的统一数据
  normalizedContent: CardItem[] = [];

  @Input() set content(data: Array<Article> | Array<Event>) {
    this.normalizedContent = this.normalizeData(data);
  }

  // 类型守卫：判断是否为Article
  private isArticle(item: Article | Event): item is Article {
    return (item as Article).author !== undefined;
  }

  // 类型守卫：判断是否为Event
  private isEvent(item: Article | Event): item is Event {
    return (item as Event).organizer !== undefined;
  }

  // 数据归一化转换函数
  private normalizeData(data: Array<Article> | Array<Event>): CardItem[] {
    return data.map(item => {
      if (this.isArticle(item)) {
        return {
          source: item.author,
          description: item.blurb
        };
      } else if (this.isEvent(item)) {
        return {
          source: item.organizer,
          description: `活动地点：${item.location}`,
          location: item.location,
          rsvpRequired: item.rsvpRequired
        };
      }
      // 兜底处理，避免类型错误
      return { source: '', description: '' };
    });
  }
}

3. 卡片组件HTML统一渲染归一化数据

直接基于normalizedContent渲染，无需区分原数据类型：

<div class="card-wrapper">
  <h3>{{ headline }}</h3>
  <div *ngFor="let item of normalizedContent" class="card-item">
    <p><strong>来源：</strong>{{ item.source }}</p>
    <p>{{ item.description }}</p>
    <!-- 仅Event类型显示专属字段 -->
    <div *ngIf="item.location" class="event-info">
      <p><strong>地点：</strong>{{ item.location }}</p>
      <span *ngIf="item.rsvpRequired" class="rsvp-tag">需要预约</span>
    </div>
  </div>
</div>

4. 父组件调用方式不变

依然按原方式传入不同类型的数组：

<!-- 传入Article数组 -->
<app-reusable-card headline="最新文章" [content]="articles"></app-reusable-card>

<!-- 传入Event数组 -->
<app-reusable-card headline="近期活动" [content]="events"></app-reusable-card>

优势 #

• 卡片组件逻辑与具体数据类型解耦，后续新增类似数据类型时，只需扩展归一化函数即可
• 类型守卫确保TS类型安全，避免运行时错误
• 渲染逻辑统一，无需在模板中做复杂的类型判断

内容的提问来源于stack exchange，提问作者jacver