我已经在我的应用程序中设置了一个计时器组件，该计时器基本上是倒数计时器。完成倒计时后，我希望将两个不同的事件发送到两个不同的页面（List和ItemDetails）。ItemDetails页面是我在其中显示"订单"项目的页面，如果我在某个订单的ItemsDetail页面，并且计时器用完了，则应执行一些逻辑。
问题在于，这仅适用于List页面中的最后一项（包含订单），我需要它与List页中的所有订单一起使用
- 编辑 -
我不假装同时拥有2个开放页面。问题在于，该事件应为List页面中的每个顺序"启动"，但它是为最后一个订单。
Timer.ts
timerTick() {
setTimeout(() => {
if (!this.timer.runTimer) { return; }
this.timer.timeRemaining--;
this.timer.displayTime = this.getSecondsAsDigitalClock(this.timer.timeRemaining);
if (this.timer.timeRemaining > 0) {
this.timerTick();
}
else {
this.timer.hasFinished = true;
this.events.publish('timer:finished',this.timer.hasFinished,this.order);
this.events.publish('timer:popnav'+this.order,this.timer.hasFinished,this.order)
}
}, 1000);
}
list.ts
constructor(private navCtrl: NavController,
private navParams: NavParams,
private events : Events) {
this.events.subscribe("timer:finished", (value,id) => {
...
})
}
itemTapped(event, sector,user) {
this.navCtrl.push(ItemDetailsPage, { sector: sector, user: user });
}
list.html
<div *ngFor="let sector of order.sectors">
<button ion-item detail-none class='col last-item' [disabled]="sector.timeOut" (click)="itemTapped($event,sector,order.user)">
<ion-row>
<ion-col col-3>
<div class='timer-line'>
<timer [timeInSeconds]="timeInSeconds(sector)" [order]="sector.orderId"></timer>
</div>
</ion-col>
<ion-col class='pull-right'>
{{ sector.name }} <i class="material-icons">arrow_forward</i>
</ion-col>
</ion-row>
</button>
</div>
item-details.ts
constructor(private navCtrl: NavController,
public navParams: NavParams,
public events: Events) {
this.selectedOrder = navParams.get('sector');
this.events.subscribe("timer:popnav"+this.selectedOrder.orderId,(value,id) => {
...
});
}
ionViewWillLeave(){
this.events.unsubscribe("timer:popnav"+this.selectedOrder.orderId);
}
好吧，我想我理解了您的问题： - ）
我试图重写一个示例以解决相同的问题。
如果问题是您要在详细页面上收到每个计时器的事件，则必须订阅"timer:popnav"而不是"timer:popnav"+this.selectedOrder.orderId，而在计时器中的发布中则是相同的：this.events.publish('timer:popnav',this.timer.hasFinished,this.order)而不是this.events.publish('timer:popnav'+this.order,this.timer.hasFinished,this.order)
这些事件在我的应用程序上正常工作，您可以在此处检查我为您推出的源代码：https：//github.com/proustibat/timer-angular-ionic-ionic-issue
希望它能有所帮助。
我在此处汇总了主要文件：
list.ts：
import {Component} from '@angular/core';
import {Events, NavController, NavParams} from 'ionic-angular';
import {ItemDetailsPage} from "../item-details/item-details";
@Component({
selector: 'page-list',
templateUrl: 'list.html',
})
export class ListPage {
order = {
user: "username",
sectors: [{
name: "First Sector",
timeOut: false,
orderId: 1
},{
name: "Second Sector",
timeOut: false,
orderId: 2
},{
name: "Third Sector",
timeOut: false,
orderId: 3
}]
};
constructor(public navCtrl: NavController, public navParams: NavParams, private events : Events) {
this.events.subscribe("timer:finished", ( value, id ) => {
console.log("ListPage Event [timer:finished]: ", value, id);
});
}
itemTapped(event, sector,user) {
this.navCtrl.push(ItemDetailsPage, { sector: sector, user: user });
}
}
list.html
<ion-header>
<ion-navbar>
<ion-title>List</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-card *ngFor="let sector of order.sectors">
<ion-card-header>
<ion-card-title>{{ sector.name }}</ion-card-title>
</ion-card-header>
<ion-card-content>
<button ion-button detail-none [disabled]="sector.timeOut" (click)="itemTapped($event, sector, order.user)">
Open details
</button>
<timer [timeInSeconds]="5" [order]="sector.orderId"></timer>
</ion-card-content>
</ion-card>
</ion-content>
item-details.ts
import { Component } from '@angular/core';
import {Events, NavController, NavParams} from 'ionic-angular';
@Component({
selector: 'page-item-details',
templateUrl: 'item-details.html',
})
export class ItemDetailsPage {
selectedOrder:any;
eventsReceived:Array<any> = [];
constructor(private navCtrl: NavController, public navParams: NavParams, public events: Events) {
this.selectedOrder = navParams.get('sector');
// this.events.subscribe("timer:popnav"+this.selectedOrder.orderId,(value,id) => {
this.events.subscribe("timer:popnav",(value,id) => {
console.log("ItemDetailsPage Event [timer:popnav]: ", value, id);
this.eventsReceived.push({
value,
id
});
});
}
ionViewWillLeave(){
// this.events.unsubscribe("timer:popnav"+this.selectedOrder.orderId);
this.events.unsubscribe("timer:popnav");
}
}
item-details.html
<ion-navbar>
<ion-title>Item Details</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-card>
<ion-card-header>
<ion-card-title>Selected Order</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-item>
name: {{selectedOrder.name}}
</ion-item>
<ion-item>
timeOut: {{selectedOrder.timeOut}}
</ion-item>
<ion-item>
orderId: {{selectedOrder.orderId}}
</ion-item>
</ion-card-content>
</ion-card>
<ion-card *ngFor="let event of eventsReceived">
<ion-card-header>
<ion-card-title>Event received</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-item>
Event id: {{event.id}}
</ion-item>
<ion-item>
Event value: {{event.value}}
</ion-item>
</ion-card-content>
</ion-card>
</ion-content>
然后您的计时器组件：
Timer.ts
import {Component, EventEmitter, Input} from '@angular/core';
import {Events} from "ionic-angular";
export interface ITimer {
seconds: number;
secondsRemaining: number;
runTimer: boolean;
hasStarted: boolean;
hasFinished: boolean;
displayTime: string;
}
@Component({
selector: 'timer',
templateUrl: 'timer.html'
})
export class TimerComponent {
@Input() timeInSeconds: number;
@Input() order: any;
public timer: ITimer;
constructor(private events:Events) {
console.log('Hello TimerComponent Component');
}
ngOnInit() {
this.initTimer();
}
hasFinished() {
return this.timer.hasFinished;
}
initTimer() {
console.log("Timer.initTimer: order = ", this.order);
if(!this.timeInSeconds) { this.timeInSeconds = 0; }
this.timer = <ITimer>{
seconds: this.timeInSeconds,
runTimer: false,
hasStarted: false,
hasFinished: false,
secondsRemaining: this.timeInSeconds
};
this.timer.displayTime = this.getSecondsAsDigitalClock(this.timer.secondsRemaining);
}
startTimer() {
this.timer.hasStarted = true;
this.timer.runTimer = true;
this.timerTick();
}
pauseTimer() {
this.timer.runTimer = false;
}
resumeTimer() {
this.startTimer();
}
timerTick() {
setTimeout(() => {
if (!this.timer.runTimer) { return; }
this.timer.secondsRemaining--;
this.timer.displayTime = this.getSecondsAsDigitalClock(this.timer.secondsRemaining);
if (this.timer.secondsRemaining > 0) {
this.timerTick();
}
else {
this.timer.hasFinished = true;
this.events.publish('timer:finished',this.timer.hasFinished,this.order);
// this.events.publish('timer:popnav'+this.order,this.timer.hasFinished,this.order);
this.events.publish('timer:popnav',this.timer.hasFinished,this.order);
}
}, 1000);
}
getSecondsAsDigitalClock(inputSeconds: number) {
var sec_num = parseInt(inputSeconds.toString(), 10); // don't forget the second param
var hours = Math.floor(sec_num / 3600);
var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
var seconds = sec_num - (hours * 3600) - (minutes * 60);
var hoursString = '';
var minutesString = '';
var secondsString = '';
hoursString = (hours < 10) ? "0" + hours : hours.toString();
minutesString = (minutes < 10) ? "0" + minutes : minutes.toString();
secondsString = (seconds < 10) ? "0" + seconds : seconds.toString();
return hoursString + ':' + minutesString + ':' + secondsString;
}
}
timer.html
<div *ngIf="timer">
<ion-item class="no-bottom-border item">
<button ion-button *ngIf="timeInSeconds && timeInSeconds > 0" large full clear class="timer-button timer-text">{{timer.displayTime}}</button>
</ion-item>
<ion-item class="no-bottom-border" *ngIf="timeInSeconds && timeInSeconds > 0">
<button ion-button icon-left clear color="danger" small (click)="initTimer()" item-left *ngIf="!timer.runTimer && (timer.hasStarted || timer.hasFinished) || timer.hasFinished">
<ion-icon name="refresh"></ion-icon>
Reset
</button>
<button ion-button icon-left clear small color="primary" (click)="pauseTimer()" item-right *ngIf="timer.runTimer && timer.hasStarted && !timer.hasFinished">
<ion-icon name="pause"></ion-icon>
Pause
</button>
<button ion-button icon-left clear small color="primary" (click)="resumeTimer()" item-right *ngIf="!timer.runTimer && timer.hasStarted && !timer.hasFinished">
<ion-icon name="play"></ion-icon>
Resume
</button>
<button ion-button icon-left clear small color="primary" (click)="startTimer()" item-right *ngIf="!timer.hasStarted">
<ion-icon name="play"></ion-icon>
Start
</button>
</ion-item>
</div>