我决定在这里问我一整天都在谷歌上寻找答案，但我似乎不明白如何实现它。所以基本上，我想做的是每次我从模态插入数据时，一旦它关闭，它就会自动更新其父视图的列表。过去，我会通过在研究我偶然发现Observables时设置超时函数来解决这个问题。现在我想知道的是如何在当前的设置上实现这一点。
这是我的组件.ts
import { Component } from '@angular/core';
import { NavController, NavParams, ModalController,FabContainer } from 'ionic-angular';
import { ModalCreateNewDirectoryPage } from '../../pages/modal-create-new-directory/modal-create-new-directory';
import {PopupUploadCsvPage} from '../../pages/popup-upload-csv/popup-upload-csv';
import { BeaconRestApiProvider } from '../../providers/beacon-rest-api/beacon-rest-api';
import {ModalShowPhonebookDirectoryPage} from '../../pages/modal-show-phonebook-directory/modal-show-phonebook-directory';
import { Observable } from 'rxjs/Observable';
import { AsyncPipe } from '@angular/common';
/**
* Generated class for the PhonebookPage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@Component({
selector: 'page-phonebook',
templateUrl: 'phonebook.html',
})
export class PhonebookPage {
items: Array<{title: string, icon:string}>;
infos:any;
fileHolder:any;
choice:boolean;
contacts:any;
constructor(public navCtrl: NavController, public navParams: NavParams, public newDirectoryOpenModal:ModalController, public beaconProvider:BeaconRestApiProvider, public uploadPopupDirectoryModal: ModalController, public showPhoneBookDirectoryModal: ModalController ) {
this.getPhonebook();
}
ionViewDidLoad() {
console.log('ionViewDidLoad PhonebookPage');
}
createNewDirectory(fab: FabContainer){
console.log('This button creates a new directory');
const showCreateDirectoryModal = this.newDirectoryOpenModal.create(ModalCreateNewDirectoryPage);
fab.close();
showCreateDirectoryModal.present();
}
uploadNewDirectory(fab: FabContainer){
const showuploadPopup = this.uploadPopupDirectoryModal.create(PopupUploadCsvPage);
fab.close();
showuploadPopup.present();
}
getPhonebook() {
this.beaconProvider.getPhoneBookDirectories()
.then(data => {
this.infos = data;
}, (err) => {
console.log(err);
});
}
phonebookIdentity(phonebook){
var phonebook_id = phonebook.phonebook_id;
this.beaconProvider.showPhonebookDirectoryList(phonebook_id)
.then(data => {
const showDirectoryList = this.showPhoneBookDirectoryModal.create(ModalShowPhonebookDirectoryPage,{list:data});
showDirectoryList.present();
}, (err) => {
console.log(err);
});
}
}
和我的模态组件.ts，它控制模态形式
import { Component, OnInit } from '@angular/core';
import { NavController, NavParams, ViewController,LoadingController,ToastController} from 'ionic-angular';
import { FormGroup, FormArray, FormBuilder, FormControl, Validators } from '@angular/forms';
import { BeaconRestApiProvider } from '../../providers/beacon-rest-api/beacon-rest-api';
/**
* Generated class for the ModalCreateNewDirectoryPage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@Component({
selector: 'page-modal-create-new-directory',
templateUrl: 'modal-create-new-directory.html',
})
export class ModalCreateNewDirectoryPage implements OnInit {
public createDirectoryForm: FormGroup;
//directoryInfo: { phonebook_name: string, number: string, personName: string, age: string, address: string} = { phonebook_name:'', number: '', personName: '', age: '', address:''};
constructor(public navCtrl: NavController, public navParams: NavParams, public newDirectoryView:ViewController, public formBuilder: FormBuilder, public beaconProvider:BeaconRestApiProvider, public pageLoader: LoadingController, public toast : ToastController) {
}
/*ngOnInit(){
this.createDirectoryForm = this.formBuilder.group({
directoryName:['',Validators.required],
fields: this.formBuilder.array([
this.initFormChild(),
])
});
}*/
ngOnInit(){
this.createDirectoryForm = this.formBuilder.group({
directoryName:['',Validators.required],
fields:this.formBuilder.array([
this.initField(),
])
});
}
initField() {
return this.formBuilder.group({
number:['',Validators.required],
personName: ['',Validators.required],
age:['',Validators.required],
address:['',Validators.required],
});
}
addField() {
const control = <FormArray>this.createDirectoryForm.controls['fields'];
control.push(this.initField());
}
removeField(i: number) {
const control = <FormArray>this.createDirectoryForm.controls['fields'];
control.removeAt(i);
}
save(form){
console.log(form);
var i;
var phonebookName = form.controls.directoryName._value;
var fields_array = [];
var record_set = [];
var fields = form.controls.fields.controls;
phonebookName = {"phonebook_name":phonebookName};
var address,age,number,personName;
var directory_header = ['number','name','age','address'];
record_set.push(directory_header);
for(i = 0; i < fields.length ; i ++ ){
if(fields[i]._value.address !=""){
address = fields[i]._value.address;
}
else{
address = '_';
}
if(fields[i]._value.age !=""){
age = fields[i]._value.age;
}
else{
age = '_';
}
if(fields[i]._value.number !=""){
number = fields[i]._value.number;
}
else{
number = '_';
}
if(fields[i]._value.personName !=""){
personName = fields[i]._value.personName;
}
else{
personName = '_';
}
fields_array = [number,personName,age,address];
record_set.push(fields_array);
//console.log(i.controls.number._value);
//console.log(i.controls.personName._value);
}
var phonebookdetails_array = record_set;
this.beaconProvider.getPhonebookId(phonebookName).then((res) => {
var phonebookId = res;
var manual_phonebook_array = {"phonebook_id":phonebookId,"phonebook_content":phonebookdetails_array};
let loadingPage = this.pageLoader.create({
content: 'Processing your request...',
showBackdrop:false
});
loadingPage.present();
this.beaconProvider.addPhonebookDirectory(manual_phonebook_array).then((res)=>{
setTimeout(() => {
loadingPage.dismiss();
this.toast.create({
message: `Phonebook Directory Added`,
duration: 3000,
position: "top",
}).present();
this.closeNewDirectoryModal();
}, 5000);
},err=>{
console.log(err);
})
}, (err) => {
console.log(err);
});
}
ionViewDidLoad() {
console.log('ionViewDidLoad ModalCreateNewDirectoryPage');
}
closeNewDirectoryModal(){
this.newDirectoryView.dismiss();
}
}
我认为这足以表明我想发生的事情，但如果没有，请告诉我。
由于您要将新目录传递到服务中;您可以将新目录分配给服务中的 BehaviorSubject，然后您可以将其作为 Observable 返回并从任何组件subscribe到它。