Swiper忽略了ng内容。

Question

我正在尝试从ngx-swiper-wrapper迁移到swiper的角度10，我的方法是尽可能有模块化的解决方案。正因为如此，我想要一个滑动包装组件和一个滑动滑块组件。

由于这一点，我可以传递不同的组件到刷卡，如果我需要修改滑动幻灯片的行为在未来，我只需要在一个地方这样做。

这种方法在ngx-swiper-wrapper中运行得很好，但是swiper忽略了ng-content，我可以呈现任何东西：

下面是我当前解决方案的一个stackblitz。

Root.component.html

 <app-swiper-carousel [options]="virtualConfig">
   <ng-container *ngFor="let slide of allSlides">
      <app-swiper-slide>
        <!-- I can render any component here -->
        <div>
          {{ slide.firstName + '&nbsp;' + slide.lastName }}
        </div>
      </app-swiper-slide>
    </ng-container>
  </app-swiper-carousel>

swiper-carousel.ts

<swiper #swip [config]="virtualConfig" [virtual]="true">
  <!-- This doesnt' work :-(  -->
  <ng-content></ng-content>

  <!-- Uncomment this to make it work -->
  <!-- <ng-container *ngFor="let slide of virtualSlides.slides">
    <ng-template swiperSlide>
      <div>
        {{ slide.firstName + '&nbsp;' + slide.lastName }}
      </div>
    </ng-template>
  </ng-container> -->
</swiper>

*滑动件

<ng-template swiperSlide>
  <ng-content></ng-content>
</ng-template>

你知道我是不是做错什么了还是有窃听器？有人知道我怎样才能实现我的目标吗？

Answer 1

创建这两个指令，

@Directive({
  selector: '[appSwiperTemplate]',
})
export class SwiperTemplateDirective {}

@Directive({
  selector: 'appSwiperContent',
})
export class SwiperContentDirective {
  @ContentChild(SwiperTemplateDirective, { read: TemplateRef })
  template!: TemplateRef<HTMLElement>;
}

更改ng-内容与此。

 <swiper [config]="config">
      <ng-template *ngFor="let slide of contents" swiperSlide>
        <ng-template [ngTemplateOutlet]="slide.template" [ngTemplateOutletContext]="{
              $implicit: slide.template
            }"></ng-template>
      </ng-template>
    </swiper>

在.ts文件中添加这一行

  @ContentChildren(SwiperContentDirective, {
    descendants: true,
  })
  contents!: QueryList<SwiperContentDirective>;

像这样使用它。

<app-swiper-form>
  <appSwiperContent *ngFor="let slide of slides">
    <ng-template appSwiperTemplate>
      .
      . Your code
      .
    </ng-template>
  </appSwiperContent>
</app-swiper-form>