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

Question

我想将我的幻灯片组件包装在我自己的组件中以实现 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

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

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

如果有帮助，请告诉我。

Answer 2

我能够使用 class 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>

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

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

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

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

Slides don't work if a slide is wrapped within a custom component

javascript

swiper

ionic-framework

ionic4