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

Question

我在 Ionic 2 中有一个 html 页面，我在其中使用 *ngFor 生成离子幻灯片，我想将数据从 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 在其他地方动态更新的情况下更安全。

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

Ionic 2 passing data from <ion-content> to <ion-footer> in the same html

html

angularjs-interpolate

ionic2

angular