离子模态变化检测

Posted 2023-03-13

【中文标题】离子模态变化检测

【英文标题】：Ionic modal change detection

【发布时间】：2017-04-17 04:32:58

【问题描述】：

我有一个组件使用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();
  

我尝试使用ChangeRefDetectormarkForCheck() 和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);

    

【问题讨论】：

可以分享模态页面代码吗？

当然，看到编辑来了 ;)

控制台正在记录数据？

是的，在基础组件中模型改成功了，但是没有触发ngOnChanges

您在视图中的显示效果如何？ :)

【参考方案1】：

好的，我找到了窍门！

当父级中的album 值更改时，Angular 不会将其检测为“已更改”：由于我在具有相同专辑实例的模态中工作，因此父级没有看到 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)

        );