html - Ionic 2 在同一 html 中将数据从 <ion-content> 传递到 <ion-footer>

Question

我在 Ionic 2 中有一个 html 页面，我正在其中使用 *ngFor 生成 ion-slide，并且我想将数据从 ngFor 传递到同一页面的页脚。

<ion-content>
    <ion-slides>
        <ion-slide *ngFor="let event of completeEvents">
                {{event.message}}
        </ion-slide>
    </ion-slides>
</ion-content>

<ion-footer>
    <div>
        <p>{{event.message}}</p>
    </div>
</ion-footer>

如何将 event.message 传递到页脚？

Answer 1

您需要有一个可以更新的模板变量。此处此示例使用名为 current 的变量。

<ion-content>
    <ion-slides (ionSlideDidChange)="current = completeEvents[$event.getActiveIndex()]">
        <ion-slide *ngFor="let event of completeEvents">
                {{event.message}}
        </ion-slide>
    </ion-slides>
</ion-content>

<ion-footer>
    <div>
        <p>{{current ? current.message : completeEvents[0].message}}</p>
    </div>
</ion-footer>

ionSlideDidChange 事件发出 $event，它是 Slides 组件的实例引用。因此您可以使用它来调用文档中任何已发布的方法。

我不确定第一次显示第一张幻灯片时是否会触发该事件。因此，我添加了 current || 0 始终显示第一个。

编辑:

我更改了答案，以便 current 保存对当前事件的引用。这使得在 completeEvents 在其他地方动态更新的情况下更安全。