在Ionic3中,ModalController的参数传递方式如下代码
let modal = this.modalCtrl.create('DemoPage', { 'item': item });
其参数类型源码
export interface ModalOptions {
showBackdrop?: boolean;
enableBackdropDismiss?: boolean;
enterAnimation?: string;
leaveAnimation?: string;
cssClass?: string;
}
create方法源码,有三个参数
create(component: any, data?: any, opts?: ModalOptions): Modal;
之后代码升级到Ionic5发现上面的代码不行了,参数的传递方式改变了,在Ionic的官网没找到对应的新的方式,后来查找到一些参考例子,测试之后发现可以用。
在Ionic4/5之后,可以参考以下例子,主要是使用componentProps
const modal = await this.modalController.create({
component: DemoPage,
componentProps: { param: item }
});
create方法源码,只有一个参数
create(opts: ModalOptions): Promise<HTMLIonModalElement>;
其参数类型源码
export interface ModalOptions<T extends ComponentRef = ComponentRef> {
component: T;
componentProps?: ComponentProps<T>;
presentingElement?: HTMLElement;
showBackdrop?: boolean;
backdropDismiss?: boolean;
cssClass?: string | string[];
delegate?: FrameworkDelegate;
animated?: boolean;
swipeToClose?: boolean;
mode?: Mode;
keyboardClose?: boolean;
id?: string;
enterAnimation?: AnimationBuilder;
leaveAnimation?: AnimationBuilder;
}
而modalpage中接受参数的方法可以不用改变
navParams.get('item');