Javascript 如何在无需在ionic中重新加载页面的情况下在modal Disclose上同步firebase数据?
我正在使用一个模式来获取表单值,这些值将保存在firebase中。我正在从firebase检索保存的数据,并将其显示在页面中。但是当我在表单提交时取消模式时,我的值没有得到更新。看起来每次我关闭模态时都必须重新加载构造函数。有没有更好的方法来更新数据而不必在modal onwilldisease上重新加载构造函数 我的主页组件,Javascript 如何在无需在ionic中重新加载页面的情况下在modal Disclose上同步firebase数据?,javascript,ionic-framework,ionic2,ionic3,Javascript,Ionic Framework,Ionic2,Ionic3,我正在使用一个模式来获取表单值,这些值将保存在firebase中。我正在从firebase检索保存的数据,并将其显示在页面中。但是当我在表单提交时取消模式时,我的值没有得到更新。看起来每次我关闭模态时都必须重新加载构造函数。有没有更好的方法来更新数据而不必在modal onwilldisease上重新加载构造函数 我的主页组件, export class HomePage { items: any = [] roomData:any; construc
export class HomePage {
items: any = []
roomData:any;
constructor(public navCtrl: NavController,public modal:ModalController,public navParams:NavParams,public auth:AuthProvider,public af:AngularFireModule) {
this.roomData=auth.getRoomData();
console.log('Rooms data from firebase',this.roomData)
this.items.push(this.roomData)
console.log(this.items);
}
addItem(){
var modal = this.modal.create(AddRoomModalPage);
modal.present();
// modal.onWillDismiss(function(success,err){
// if(err){
// return console.log('thsk');
// }else{
// }
// })
}
}
export class AddRoomModalPage {
public roomDetails:FormGroup;
constructor(public navCtrl: NavController, public auth:AuthProvider,public navParams: NavParams,public formBuilder: FormBuilder,public viewCtrl:ViewController) {
this.roomDetails = formBuilder.group({
roomName: ['', Validators.required],
idealFor:['',Validators.required],
roomMates: ['', Validators.required],
location: ['', Validators.required],
reqID:[false,Validators.required]
});
}
ionViewDidLoad() {
console.log('ionViewDidLoad AddRoomModalPage');
}
addRoom(){
if(this.roomDetails.valid){
console.log(this.roomDetails.value);
this.auth.addNewRoom(this.roomDetails.value);
this.viewCtrl.dismiss();
}else{
console.log("form invalid")
}
}
closeModal(){
this.viewCtrl.dismiss();
}
我的模态组件,
export class HomePage {
items: any = []
roomData:any;
constructor(public navCtrl: NavController,public modal:ModalController,public navParams:NavParams,public auth:AuthProvider,public af:AngularFireModule) {
this.roomData=auth.getRoomData();
console.log('Rooms data from firebase',this.roomData)
this.items.push(this.roomData)
console.log(this.items);
}
addItem(){
var modal = this.modal.create(AddRoomModalPage);
modal.present();
// modal.onWillDismiss(function(success,err){
// if(err){
// return console.log('thsk');
// }else{
// }
// })
}
}
export class AddRoomModalPage {
public roomDetails:FormGroup;
constructor(public navCtrl: NavController, public auth:AuthProvider,public navParams: NavParams,public formBuilder: FormBuilder,public viewCtrl:ViewController) {
this.roomDetails = formBuilder.group({
roomName: ['', Validators.required],
idealFor:['',Validators.required],
roomMates: ['', Validators.required],
location: ['', Validators.required],
reqID:[false,Validators.required]
});
}
ionViewDidLoad() {
console.log('ionViewDidLoad AddRoomModalPage');
}
addRoom(){
if(this.roomDetails.valid){
console.log(this.roomDetails.value);
this.auth.addNewRoom(this.roomDetails.value);
this.viewCtrl.dismiss();
}else{
console.log("form invalid")
}
}
closeModal(){
this.viewCtrl.dismiss();
}
任何帮助都将不胜感激。提前谢谢 您可以在模式中使用
ionViewWillLeave()
,或者在主页中使用ionViewWillEnter()
来获取此事件
请参阅官方文档。您可以使用ModalController的onDismiss()方法。简单的例子:
let modal = Modal.create(myModal, { data: [...] });
// Getting data from the modal:
modal.onDismiss(data => {
// Update your props here
console.log('MODAL DATA', data);
});
this.nav.present(modal);