Angular 10从ngx-swiper-wrapper迁移到swiper时ng-content被忽略问题求解

问题原因 #

你当前的实现不符合swiper-angular的运行规则，并非swiper本身的bug：
swiper-angular是通过识别<swiper>组件直接子节点上的swiperSlide结构指令来读取幻灯片内容的，你将swiperSlide封装在了自定义app-swiper-slide组件内部，再通过<ng-content>投影到<swiper>节点下时，swiperSlide指令已经不是<swiper>的直接子节点，无法被swiper内部逻辑捕获，因此不会渲染任何内容。

解决方案 #

可以通过「查询子组件模板+内部渲染」的方式实现你要的模块化封装，无需修改外层调用逻辑：

1. 改造app-swiper-slide组件，暴露内部幻灯片模板 #

swiper-slide.component.ts

import { Component, ViewChild, TemplateRef } from '@angular/core';
import { SwiperSlideDirective } from 'swiper/angular';

@Component({
  selector: 'app-swiper-slide',
  template: `
    <ng-template swiperSlide>
      <ng-content></ng-content>
    </ng-template>
  `
})
export class SwiperSlideComponent {
  // 抓取内部的swiperSlide指令实例
  @ViewChild(SwiperSlideDirective, { static: true }) slideDir!: SwiperSlideDirective;

  // 对外暴露幻灯片模板
  get slideTemplate(): TemplateRef<unknown> {
    return this.slideDir.templateRef;
  }
}

2. 改造app-swiper-carousel组件，内部渲染所有幻灯片模板 #

swiper-carousel.component.ts

import { Component, ContentChildren, Input, QueryList } from '@angular/core';
import { SwiperOptions } from 'swiper';
import { SwiperSlideComponent } from './swiper-slide.component';

@Component({
  selector: 'app-swiper-carousel',
  template: `
    <swiper [config]="options" [virtual]="enableVirtual">
      <!-- 直接循环渲染所有子slide暴露的模板，此时swiperSlide是swiper的直接子节点，可被识别 -->
      <ng-container *ngFor="let slide of slideList">
        <ng-template [ngTemplateOutlet]="slide.slideTemplate"></ng-template>
      </ng-container>
    </swiper>
  `
})
export class SwiperCarouselComponent {
  @Input() options!: SwiperOptions;
  // 可根据需求配置是否开启虚拟滚动
  @Input() enableVirtual = false;
  // 抓取所有投影进来的app-swiper-slide实例
  @ContentChildren(SwiperSlideComponent) slideList!: QueryList<SwiperSlideComponent>;
}

3. 外层调用逻辑保持不变 #

你原来的Root.component.html代码完全不用修改，直接沿用即可：

<app-swiper-carousel [options]="virtualConfig" [enableVirtual]="true">
  <ng-container *ngFor="let slide of allSlides">
    <app-swiper-slide>
      <!-- 可自由传入任意内容/组件 -->
      <div>
        {{ slide.firstName + '&nbsp;' + slide.lastName }}
      </div>
    </app-swiper-slide>
  </ng-container>
</app-swiper-carousel>

注意事项 #

如果有动态增减幻灯片的需求，监听slideList的changes事件，触发swiper的update()方法更新实例即可。

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