Question

使用最新的离子2（释放）和Angular 2

[编辑：对不起，这个问题太复杂了。我在How to bind to an item in an ngFor loop in Ionic 2?]

发布了此问题的更简化版本

在我的应用程序中，我正在模仿一堆卡片“火种”风格。我还有一个具有'timeInSeconds'输入的Timer组件。定时器组件显示每张卡的倒计时。卡和计时器机制与问题并不真正相关，但知道每张卡依次显示（不像滚动列表）并且可以刷掉它可能很重要。此外，Timer组件只需要一个值（以秒为单位的时间），并从此开始向下计数。

代码的一个非常简化的版本是：

<ion-content>
    <div *ngFor="let c of cards">
        …
        <timer #timer [timeInSeconds]=“c.datetime”></timer>
        …
    </div>
</ion-content>

这将依次显示每张卡，包括计时器。它工作正常。但是，我似乎通过为每张卡分配一个单独的计时器而失去了很多cpu周期 - 大大减慢了应用程序（有趣的是，iOS似乎比android更好地处理这个）。

因此，我想在页面顶部只显示一个计时器显示，然后每次更换卡时都会更改。意思是这样的：

<ion-header>
    <timer #timer [timeInSeconds]=“_timespan”></timer>
</ion-header>
<ion-content>
    <div *ngFor="let c of cards" [timespan]=“c.datetime">
    …
    </div>
</ion-content>

在ts中，我尝试阅读自己的输入：

public _timespan: number;
@Input()
    set timespan(value: number) {
        this._timespan = value;
    }
    get timespan() { 
        return this._timespan ; 
    }

但这似乎不太可能。我怀疑我的输入和输出完全丢失了情节，因为我对角度很新。任何人都可以把我放在正确的道路上，并建议一种完成我想要的方式吗？

非常感谢任何帮助。

在Ionic 2中的同一模板中共享数据

0 个答案: