ionChange - 仅检测 Ionic 2 中从视图到模型的变化
ionChange - detect changes only from view to model in Ionic 2
我有一个允许安排通知(提醒功能)的 Ionic 2 应用程序。
嗯,要求是:
- 当用户进入提醒页面时,应该检查一个
已保存提醒。
如果有已保存的提醒(我目前正在使用
存储),时钟应与保存的提醒时间一起显示,并且
切换处于活动状态。
否则,时钟应该与当前时间一起显示,并且切换
错误状态(停用)。
这很好用。我可以保存提醒并且一切正常,也可以禁用它们。
当我有一个已保存的提醒并进入页面时出现问题,它显示 "Reminder saved" 的通知,当然,实际发生的是,当我进入那个页面时,它首先确认是否有保存的提醒,如果是,则切换被激活。此切换链接到事件 (ionChange)
,因为它是我用来处理提醒的激活/停用的事件。
然后每次我进入页面并且有一个保存的提醒时,它将切换设置为true,然后默认初始化为false并且(ionChange)
检测到有变化,再次触发事件,这就是为什么它结束了我 再次保存提醒。
还不错,但应该不会每次进入都保存提示
我正在考虑使用 click
事件而不是 ionChange
,但没有成功。
这是我的代码:
HTML:
<ion-content padding>
<div class="selector">
<ion-item>
<ion-label>Recordatorio</ion-label>
<ion-toggle class="toggle" [(ngModel)]="toggleStatus" checked="true" (click)="changeToggle()"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Horario</ion-label>
<ion-datetime
pickerFormat="HH:mm"
[(ngModel)]="time"
(ngModelChange)="timeChanged()"
cancelText="Cancelar"
doneText="Aceptar">
</ion-datetime>
</ion-item>
</div>
</ion-content>
打字稿:
ionViewWillEnter(): void {
this.setDefaultProperties();
}
public setDefaultProperties(): void {
this.date = new Date();
this.setDefaultPickerTime();
this.setToggleStatus();
}
public setDefaultPickerTime(): void {
this.storage.get('reminderTime')
.then((result) => {
if (result) {
this.time = result;
} else {
let actualTime: string = this.actualFormattedTime();
this.time = actualTime;
}
})
.catch((err) => {
console.log(err);
});
}
public setToggleStatus(): void {
this.storage.get('reminderToggleStatus')
.then((result) => {
this.toggleStatus = result;
})
.catch((err) => {
console.log(err);
});
}
public timeChanged(): void {
if (this.toggleStatus === true) {
this.saveReminder();
}
}
public changeToggle(): void {
if (this.toggleStatus === true) {
this.saveReminder();
} else {
console.log("deselecciono");
this.deleteReminder();
this.deleteStoredReminderData();
this.showDeleteReminderMsg();
}
}
public deleteReminder(): void {
LocalNotifications.cancelAll()
.then((succes) => {
//
})
.catch((err) => {
console.log(err);
});
}
public deleteStoredReminderData(): void {
this.storage.remove('reminderTime')
.then(() => {
console.log("Tiempo eliminado");
})
.catch((err) => {
console.log(err);
});
this.storage.remove('reminderToggleStatus')
.then(() => {
console.log("Toggle status eliminado");
})
.catch((err) => {
console.log(err);
});
}
public timePicked(): boolean {
if (this.time) {
return true;
} else {
return false;
}
}
public saveReminder(): void {
if (this.timePicked()) {
var scheduleDate = new Date(this.actualDate() + ' ' + this.time);
LocalNotifications.schedule({
id: 1,
text: '¡Hora de meditar!',
//at: new Date(new Date().getTime() + 5),
at: scheduleDate,
sound: 'file://audio/sound.mp3',
every: "day",
//data: { message : 'Informacion' },
//icon: 'res://icon',
//smallIcon: 'res://ic_popup_sync'
});
this.persistToggleStatus();
this.persistTime();
this.showSavedReminderMsg();
} else {
this.showNoTimePickedError();
setTimeout(() => {
this.toggleStatus = false;
}, 100)
}
}
public persistToggleStatus(): void {
this.storage.set('reminderToggleStatus', this.toggleStatus);
}
public persistTime(): void {
this.storage.set('reminderTime', this.time);
}
我只包含了相关代码..
简而言之: 我需要知道我是否可以仅从视图中触发 (ionChange)
并防止它在检测到模型发生变化时被激活,来自控制器。
提前致谢!!
我用 (ngModelChange)
而不是 (ionChange)
解决了这个问题
我有一个允许安排通知(提醒功能)的 Ionic 2 应用程序。
嗯,要求是:
- 当用户进入提醒页面时,应该检查一个 已保存提醒。
如果有已保存的提醒(我目前正在使用 存储),时钟应与保存的提醒时间一起显示,并且 切换处于活动状态。
否则,时钟应该与当前时间一起显示,并且切换 错误状态(停用)。
这很好用。我可以保存提醒并且一切正常,也可以禁用它们。
当我有一个已保存的提醒并进入页面时出现问题,它显示 "Reminder saved" 的通知,当然,实际发生的是,当我进入那个页面时,它首先确认是否有保存的提醒,如果是,则切换被激活。此切换链接到事件 (ionChange)
,因为它是我用来处理提醒的激活/停用的事件。
然后每次我进入页面并且有一个保存的提醒时,它将切换设置为true,然后默认初始化为false并且(ionChange)
检测到有变化,再次触发事件,这就是为什么它结束了我 再次保存提醒。
还不错,但应该不会每次进入都保存提示
我正在考虑使用 click
事件而不是 ionChange
,但没有成功。
这是我的代码:
HTML:
<ion-content padding>
<div class="selector">
<ion-item>
<ion-label>Recordatorio</ion-label>
<ion-toggle class="toggle" [(ngModel)]="toggleStatus" checked="true" (click)="changeToggle()"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Horario</ion-label>
<ion-datetime
pickerFormat="HH:mm"
[(ngModel)]="time"
(ngModelChange)="timeChanged()"
cancelText="Cancelar"
doneText="Aceptar">
</ion-datetime>
</ion-item>
</div>
</ion-content>
打字稿:
ionViewWillEnter(): void {
this.setDefaultProperties();
}
public setDefaultProperties(): void {
this.date = new Date();
this.setDefaultPickerTime();
this.setToggleStatus();
}
public setDefaultPickerTime(): void {
this.storage.get('reminderTime')
.then((result) => {
if (result) {
this.time = result;
} else {
let actualTime: string = this.actualFormattedTime();
this.time = actualTime;
}
})
.catch((err) => {
console.log(err);
});
}
public setToggleStatus(): void {
this.storage.get('reminderToggleStatus')
.then((result) => {
this.toggleStatus = result;
})
.catch((err) => {
console.log(err);
});
}
public timeChanged(): void {
if (this.toggleStatus === true) {
this.saveReminder();
}
}
public changeToggle(): void {
if (this.toggleStatus === true) {
this.saveReminder();
} else {
console.log("deselecciono");
this.deleteReminder();
this.deleteStoredReminderData();
this.showDeleteReminderMsg();
}
}
public deleteReminder(): void {
LocalNotifications.cancelAll()
.then((succes) => {
//
})
.catch((err) => {
console.log(err);
});
}
public deleteStoredReminderData(): void {
this.storage.remove('reminderTime')
.then(() => {
console.log("Tiempo eliminado");
})
.catch((err) => {
console.log(err);
});
this.storage.remove('reminderToggleStatus')
.then(() => {
console.log("Toggle status eliminado");
})
.catch((err) => {
console.log(err);
});
}
public timePicked(): boolean {
if (this.time) {
return true;
} else {
return false;
}
}
public saveReminder(): void {
if (this.timePicked()) {
var scheduleDate = new Date(this.actualDate() + ' ' + this.time);
LocalNotifications.schedule({
id: 1,
text: '¡Hora de meditar!',
//at: new Date(new Date().getTime() + 5),
at: scheduleDate,
sound: 'file://audio/sound.mp3',
every: "day",
//data: { message : 'Informacion' },
//icon: 'res://icon',
//smallIcon: 'res://ic_popup_sync'
});
this.persistToggleStatus();
this.persistTime();
this.showSavedReminderMsg();
} else {
this.showNoTimePickedError();
setTimeout(() => {
this.toggleStatus = false;
}, 100)
}
}
public persistToggleStatus(): void {
this.storage.set('reminderToggleStatus', this.toggleStatus);
}
public persistTime(): void {
this.storage.set('reminderTime', this.time);
}
我只包含了相关代码..
简而言之: 我需要知道我是否可以仅从视图中触发 (ionChange)
并防止它在检测到模型发生变化时被激活,来自控制器。
提前致谢!!
我用 (ngModelChange)
而不是 (ionChange)