离子模态变化检测

时间:2016-12-02 09:53:55

标签: angular ionic-framework angular2-changedetection

我有一个使用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()强制更改检测,然后我尝试使用角度区域,但是当调用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});

    }

}

1 个答案:

答案 0 :(得分:1)

好的,我找到了诀窍!

当父级album值发生变化时,角度不会将其检测为"已更改" :因为我在具有相同专辑实例的模态中工作,所以父模型看不到模态传回的album的更改。

我必须创建一个新的专辑实例并将其传递给我的模态才能使其正常工作(请参阅here让我走向正确方向的链接):

        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)

        });