Ionic4/5的ModalController的参数传递
kelvin 发布于 2021-05-23

在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');
kelvin
关注 私信
文章
92
关注
0
粉丝
0