将数据传递给 Ionic 5 中的弹出窗口
Pass data to a popover in Ionic 5
在 Ionic 3 中,将数据传递到弹出窗口非常简单:
let popover = this.popoverCtrl.create(PopoverPage, {key1:value1, key2: value2});
并且可以使用 navParams
检索
如何在 Ionic 5 中实现相同的功能?文档没有提到传递数据。
我想既然我们处理父组件和子组件很像处理模态,我会调整 documented modal method of passing and retrieving data(即使用 componentProps
属性):
this.popover = await this.popoverController.create({
component: popoverComponent,
componentProps: {key1: value1}
});
为了传递数据,我只是将其设置为 @Input()
:
export class ModalPage {
// Data passed in by componentProps
@Input() key1: string;
}
点击显示弹出窗口
showPopup(){
this.popoverController.create({
component: PopupPage,
translucent: true,
cssClass: '',
mode: 'ios',
componentProps: { key1:value1, key2: value2 }
}).then((popover: any) => {
popover.present();
});
}
Get Popup Data page(popup.page.ts)
constructor(public navParams: NavParams){
const key1= this.navParams.get('key1');
const key2 = this.navParams.get('key2 ');
}
在 Ionic 3 中,将数据传递到弹出窗口非常简单:
let popover = this.popoverCtrl.create(PopoverPage, {key1:value1, key2: value2});
并且可以使用 navParams
如何在 Ionic 5 中实现相同的功能?文档没有提到传递数据。
我想既然我们处理父组件和子组件很像处理模态,我会调整 documented modal method of passing and retrieving data(即使用 componentProps
属性):
this.popover = await this.popoverController.create({
component: popoverComponent,
componentProps: {key1: value1}
});
为了传递数据,我只是将其设置为 @Input()
:
export class ModalPage {
// Data passed in by componentProps
@Input() key1: string;
}
点击显示弹出窗口
showPopup(){
this.popoverController.create({
component: PopupPage,
translucent: true,
cssClass: '',
mode: 'ios',
componentProps: { key1:value1, key2: value2 }
}).then((popover: any) => {
popover.present();
});
}
Get Popup Data page(popup.page.ts)
constructor(public navParams: NavParams){
const key1= this.navParams.get('key1');
const key2 = this.navParams.get('key2 ');
}