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

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

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

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