Question

Ionic4项目中我们可以使用Ionic4模态框组件ion-modal对项目进行布局。

ion-modal官方文档地址:https://ionicframework.com/docs/api/modal

A Modal is a dialog that appears on top of the app's content, and must be dismissed by the app before interaction can resume. It is useful as a select component when there are a lot of options to choose from, or when filtering items in a list, as well as many other use cases.

Creating

Modals can be created using a Modal Controller. They can be customized by passing modal options in the modal controller's create method.

Passing parameters

When a modal is created, parameters might be passed to the newly created modal:

// Create a modal using MyModalComponent with some initial data
const modal = await modalController.create({
  component: MyModalComponent,
  componentProps: {
    'prop1': value,
    'prop2': value2
  }
});

Under the hood, the controller creates a new ion-modal and attaches the specified component to it. It also assigns the specified componentProps to the component's instance:

// pseudo-code
const instance = create(MyModalComponent);
instance.prop1 = value;
instance.prop2 = value2;

This way, your component can access the passed params, check the "ion-modal　用法(Usage)" section for further code example for each frameworks.

Returning data

Modals can also return data back to the controller when they are dismissed.

const modal = await modalController.create({...});
const { data } = await modal.onDidDismiss();
console.log(data);

// Dismiss the top modal returning some data object
modalController.dismiss({
  'result': value
})

ion-modal　用法(Usage)

angularjavascriptreactvue

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { ModalPage } from '../modal/modal.page';
@Component({
  selector: 'modal-example',
  templateUrl: 'modal-example.html',
  styleUrls: ['./modal-example.css']
})
export class ModalExample {
  constructor(public modalController: ModalController) {}

  async presentModal() {
    const modal = await this.modalController.create({
      component: ModalPage,
      componentProps: { value: 123 }
    });
    return await modal.present();
  }
}

import { Component, Input } from '@angular/core';
import { NavParams } from '@ionic/angular';

@Component({
  selector: 'modal-page',
})
export class ModalExample {

  // "value" passed in componentProps
  @Input() value: number;

  constructor(navParams: NavParams) {
    // componentProps can also be accessed at construction time using NavParams
  }

}

Lazy Loading

When lazy loading a modal, it's important to note that the modal will not be loaded when it is opened, but rather when the module that imports the modal's module is loaded.

For example, say there exists a CalendarComponent and an EventModal. The modal is presented by clicking a button in the CalendarComponent. In Angular, the EventModalModule would need to be included in the CalendarComponentModule since the modal is created in the CalendarComponent:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';

import { CalendarComponent } from './calendar.component';
import { EventModalModule } from '../modals/event/event.module';

@NgModule({
    declarations: [
        CalendarComponent
    ],
    imports: [
      IonicModule,
      CommonModule,
      EventModalModule
    ],
    exports: [
      CalendarComponent
    ]
})

export class CalendarComponentModule {}

  
</body>

customElements.define('modal-page', class extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `

  
    Super Modal
  


  Content
`;
  }
});

async function presentModal() {
  // initialize controller
  const modalController = document.querySelector('ion-modal-controller');
  await modalController.componentOnReady();

  // present the modal
  const modalElement = await modalController.create({
    component: 'modal-page'
  });
  await modalElement.present();
}

import React, { Component } from 'react'
import { IonModal } from '@ionic/react';

type Props = {}
type State = {
  showModal: boolean
}

export class ModalExample extends Component {

  constructor(props: Props) {
    super(props);
    this.state = {
      showModal: false
    };
  }

  render() {
    return (
       this.setState(() => ({ showModal: false }))}
      >
        
This is modal content
         this.setState(() => ({ showModal: false }))}>
          Close Modal
        
      
    );
  }
}

  >
    
      
        {{ title }}
      
    
    
      {{ content }}