我在 Ionic 中使用 modal 并且我正在傳遞 componentProps：
//in the Main component
someList:number[] = [1, 2];
someString:string = "test";
async presentModal(ev: any) {
const modal = await this.modalController.create({
component: ModalComponent,
componentProps: {
someList: this.someList,
someString: this.someString
}
});
await modal.present();
}
模態組件 ModalComponent 本身定義
@Input('someList') someList;
@Input('someString') someString;
當我在 ModalComponent 中更新時：
this.someList.push(3);
...它反映了 Main 組件/模板中的更改。但如果我更新
this.someString = "new string";
...它不會反映在主要組件/模板中。
不完全確定為什么，有辦法解決這個問題嗎？
注意：我可以通過將“this”傳遞給 componentProps 來解決這個問題：
componentProps: {
ref: this
}
...然后從“ref”（即：ref.someString）訪問“someString”屬性，當在 ModalComponent 中更改時，它將反映在 Main 組件/模板中。但我覺得傳遞對整個組件的參考并不是一個好習慣。
uj5u.com熱心網友回復：
您可以在模態關閉后將更改傳回主組件，如下所示：
dismiss() {
this.modalController.dismiss({
someString: this.someString,
});
}
并在您的父組件中，在模態初始化之后添加：
modal.onDidDismiss().then(data => {
this.someString= data.data.someString;
});
所以它會像這樣尋找你：
async presentModal(ev: any) {
const modal = await this.modalController.create({
component: ModalComponent,
componentProps: {
someList: this.someList,
someString: this.someString
}
});
modal.onDidDismiss().then(data => {
this.someString= data.data.someString;
});
await modal.present();
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/312556.html