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

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

正如最初在swiperjs中所做的那样，我能够使用swiper-slide类解决这个问题。

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

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

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

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

Answer 2

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

以下是工作代码。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>

如果有帮助，请让我知道。