離子2傳遞數據 <ion-content> 至 <ion-footer> 在同一HTML

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 || 0始終顯示第一個。

編輯：

我更改了答案，以便current擁有對當前事件的引用。 在completeEvents在其他位置動態更新的情況下，這樣做更安全。