我决定在这里问我一整天都在看谷歌寻找答案，但我似乎无法理解如何实施它。所以基本上，我想要做的是每次我从模态插入数据一旦它关闭它将自动更新其父视图的列表。在过去，我会通过在研究我偶然发现Observables时设置超时功能来解决这个问题。现在我想知道的是如何在我当前的设置中实现这一点。
这是我的component.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);
});
}
}
和我的modal component.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();
}
}
我认为这足以说明我想要发生什么，但如果不让我知道。
答案 0 :(得分：0)
因为您将新目录传递到服务中;您可以将新目录分配给服务中的BehaviourSubject，然后您可以从任何组件将其作为Observable和subscribe返回给它。