如果幻灯片包含在自定义组件中，则幻灯片不起作用答案

【问题标题】：Slides don't work if a slide is wrapped within a custom component如果幻灯片包含在自定义组件中，则幻灯片不起作用
【发布时间】：2020-01-08 08:16:22
【问题描述】：

我想将我的幻灯片组件包装在我自己的组件中以实现 ATOM 方法。但由于ion-slide 不再是ion-slides 的直接子代，它不会检测到多张幻灯片。

这是我的app-slide 组件：

<ion-slide>
  <ng-content></ng-content>
</ion-slide>

那我这样称呼它：

<ion-slides>
  <app-slide>Test</app-slide>
  <app-slide>Test 2</app-slide>
  <app-slide>Test 3</app-slide>
</ion-slides>

Stackblitz：https://stackblitz.com/edit/ionic-v4-x7wgrz

有没有办法忽略父母？或者我还能怎么做？

【问题讨论】：

标签： javascript ionic-framework ionic4 swiper

【解决方案1】：

您只需要对结构进行一些更改。请尝试以下代码。

这是工作代码。 https://stackblitz.com/edit/ionic-v4-zwjta3

<ion-slides>
    <ion-slide>
        <app-slide>Test</app-slide>
    </ion-slide>
    <ion-slide>
        <app-slide>Test 2</app-slide>
    </ion-slide>
    <ion-slide>
        <app-slide>Test 3</app-slide>
    </ion-slide>
</ion-slides>

您的组件文件应如下所示。

<ng-content></ng-content>

如果这有帮助，请告诉我。

【讨论】：

这意味着我每次想使用app-slide时都必须使用ion-slide。这不是我要找的。我希望它取代ion-slide。在这种情况下，我宁愿只使用ion-slide 而不是我自己的组件。

【解决方案2】：

我能够使用 swiper-slide 类解决这个问题，因为它最初是在 swiperjs 中完成的。

<ion-slides>
  <app-slide class="swiper-slide">Test</app-slide>
  <app-slide class="swiper-slide">Test 2</app-slide>
  <app-slide class="swiper-slide">Test 3</app-slide>
</ion-slides>

为了避免每次都手动键入类，一个更好的解决方案是将HostBinding 添加到app-slide 组件，如下所示：

@HostBinding('class.swiper-slide') swiperSlide: boolean = true;

工作示例：https://stackblitz.com/edit/ionic-v4-x7wgrz

【讨论】：