如何复用Angular Swiper组件展示不同类型动态内容？

核心思路 #

把Swiper组件改造成通用容器组件，只负责swiper的基础渲染和配置逻辑，将每个slide的具体内容交给父组件自定义，彻底避免重复代码和冗余配置。

步骤1：改造通用Swiper组件 #

1.1 更新组件TS文件 #

添加输入属性，接收swiper配置、数据源，以及父组件传递的slide内容模板：

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

@Component({
  selector: 'app-swiper',
  templateUrl: './swiper.component.html',
  styleUrls: ['./swiper.component.css']
})
export class SwiperComponent {
  // Swiper核心配置项
  @Input() swiperConfig: any;
  // 渲染所需的数据源数组
  @Input() swiperData: any[] = [];
  // 父组件定义的slide内容模板
  @Input() slideTemplate!: TemplateRef<any>;
}

1.2 更新组件HTML文件 #

使用ngTemplateOutlet渲染父组件传入的模板，同时将当前数据项和索引传递给模板：

<swiper #swiper [config]="swiperConfig">
  <ng-template 
    swiperSlide 
    *ngFor="let item of swiperData; let i=index"
    [ngTemplateOutlet]="slideTemplate"
    [ngTemplateOutletContext]="{ $implicit: item, index: i }"
  >
  </ng-template>
</swiper>

步骤2：在首页复用Swiper组件 #

2.1 首页TS文件 #

定义通用的swiper配置、地图数据源、YouTube数据源：

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
  // 复用的基础Swiper配置（如需差异化展示，可单独定义两个配置）
  commonSwiperConfig = {
    slidesPerView: 1,
    navigation: true,
    loop: true,
    // 其他你需要的配置项
  };

  // 地图组件所需的数据源数组
  mapDataArray = [
    { /* 地图数据对象：如坐标、地址等 */ },
    { /* 地图数据对象 */ }
  ];

  // YouTube组件所需的数据源数组
  youtubeDataArray = [
    { /* YouTube数据对象：如视频ID、标题等 */ },
    { /* YouTube数据对象 */ }
  ];
}

2.2 首页HTML文件 #

两次调用app-swiper，分别传递对应的数据和自定义内容模板：

<!-- 展示地图的Swiper实例 -->
<app-swiper 
  [swiperConfig]="commonSwiperConfig"
  [swiperData]="mapDataArray"
  [slideTemplate]="mapSlideTpl"
></app-swiper>

<!-- 展示YouTube的Swiper实例 -->
<app-swiper 
  [swiperConfig]="commonSwiperConfig"
  [swiperData]="youtubeDataArray"
  [slideTemplate]="youtubeSlideTpl"
></app-swiper>

<!-- 地图slide的内容模板 -->
<ng-template #mapSlideTpl let-mapData let-index="index">
  <app-map-display [mapData]="mapData"></app-map-display>
</ng-template>

<!-- YouTube slide的内容模板 -->
<ng-template #youtubeSlideTpl let-youtubeData let-index="index">
  <app-youtube-frame [videoData]="youtubeData"></app-youtube-frame>
</ng-template>

关键优势 #

• 彻底复用：无需复制swiper的HTML结构和配置，统一维护基础swiper行为
• 高度灵活：支持不同数据源、不同内容模板，甚至可以传递差异化的swiper配置
• 解耦清晰：Swiper组件只负责容器渲染逻辑，地图/YouTube组件专注自身业务实现

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