离子模态变化检测
Ionic modal change detection
我有一个组件使用 Ionic modal 来修改相册变量。
addMedias() {
let self = this;
let profileModal = self.modalCtrl.create(AlbumAddPage, { album: self.album });
profileModal.onDidDismiss(data => {
self.zone.run(() => {
console.log("ALBUM " + data.album)
self.album = data.album;
})
});
profileModal.present();
}
我尝试使用 ChangeRefDetector
markForCheck()
和 detectChanges()
强制更改检测,然后我尝试使用 angular 区域,但是当 onDidDismiss()
被调用时,此组件的视图不会更新。
有什么想法吗?
编辑:这是模态代码:
@Component({
selector: 'page-album-add',
templateUrl: 'album-add.html'
})
export class AlbumAddPage {
album: any;
constructor(
private navParams: NavParams,
public navCtrl: NavController,
private viewCtrl: ViewController,
) {
this.album = navParams.data.album;
}
addMedias(asset){
this.album.assets.push(asset);
this.viewCtrl.dismiss({album:this.album});
}
}
好的,我找到窍门了!
当父级中的 album
值发生变化时,angular 不会将其检测为 "changed" :因为我在具有相同相册实例的模式中工作,所以父级看不到随着模态传回的 album
发生变化。
我必须创建一个新的相册实例并将其传递到我的模态以使其工作(参见 和 link 使我朝着正确的方向前进):
let self = this;
let album = this.album; // Copies the album
this.album = []; // Changes the album
let editionModal = self.modalCtrl.create(AlbumEditionPage, {
album: album
});
editionModal.onDidDismiss(data => {
setTimeout(function () {
console.log("new album data from edition : ")
self.album = data.album
console.log(data.album);
console.log(self.album);
}, 0)
});
我有一个组件使用 Ionic modal 来修改相册变量。
addMedias() {
let self = this;
let profileModal = self.modalCtrl.create(AlbumAddPage, { album: self.album });
profileModal.onDidDismiss(data => {
self.zone.run(() => {
console.log("ALBUM " + data.album)
self.album = data.album;
})
});
profileModal.present();
}
我尝试使用 ChangeRefDetector
markForCheck()
和 detectChanges()
强制更改检测,然后我尝试使用 angular 区域,但是当 onDidDismiss()
被调用时,此组件的视图不会更新。
有什么想法吗?
编辑:这是模态代码:
@Component({
selector: 'page-album-add',
templateUrl: 'album-add.html'
})
export class AlbumAddPage {
album: any;
constructor(
private navParams: NavParams,
public navCtrl: NavController,
private viewCtrl: ViewController,
) {
this.album = navParams.data.album;
}
addMedias(asset){
this.album.assets.push(asset);
this.viewCtrl.dismiss({album:this.album});
}
}
好的,我找到窍门了!
当父级中的 album
值发生变化时,angular 不会将其检测为 "changed" :因为我在具有相同相册实例的模式中工作,所以父级看不到随着模态传回的 album
发生变化。
我必须创建一个新的相册实例并将其传递到我的模态以使其工作(参见
let self = this;
let album = this.album; // Copies the album
this.album = []; // Changes the album
let editionModal = self.modalCtrl.create(AlbumEditionPage, {
album: album
});
editionModal.onDidDismiss(data => {
setTimeout(function () {
console.log("new album data from edition : ")
self.album = data.album
console.log(data.album);
console.log(self.album);
}, 0)
});