Swiper игнорирует ng-контент

Question

Я пытаюсь перейти с Angular 10. Мой подход состоит в том, чтобы иметь как можно более модульное решение. Из-за этого я хочу иметь swiper-wrapper.component и swiper-slide.component.

Благодаря этому я могу передавать различные компоненты в swiper, и в случае, если мне нужно изменить поведение swiper-slide в будущем, мне нужно сделать это только в одном месте.

Этот подход очень хорошо работал в ngx-swiper-wrapper тем не мение swiper игнорирует ng-content и я могу рендерить что угодно :-(

Вот стек для моего текущего решения.

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>

* swiper-slide.component

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

Есть идеи, что я делаю что-то не так или в swiper есть ошибка? Кто-нибудь знает, как я могу достичь своей цели?

Answer 1

Создайте эти две директивы,

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

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

Измените ng-content с помощью этого.

       <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>