How to lazy load modals in ionic4

问题

I need some help with lazy loading of modals in ionic 4. I googled a lot but can't find an exact solution.

I have several modals on a page. And I want to lazy load them. Following is the example of two modals on a page

In one of my modal, I need AndroidPermissions, so I have to import it in the module file of the page because importing in the module file of the modal is not working.

Why this is happening? Can ionic modals not be lazy-loaded?

Thank you in advance

home.module.ts

import { AddressPage } from '../pages/address/address.page'; // modal 1
import { AddAddressPage } from '../pages/add-address/add-address.page' // modal 2
import { AndroidPermissions } from '@ionic-native/android-permissions/ngx';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ])
  ],
  declarations: [HomePage, AddressPage, AddAddressPage],
  entryComponents :[AddressPage , AddAddressPage],
  providers :[AndroidPermissions]
})
export class HomePageModule {}

回答1:

To lazy loading of modals follow following steps

Add modal page's module in the import of your page
Remove all routing of modal as we don't need it
Remove modal's entry from app.routing.module
Add modal page in entryComponents of modal's module

In my case, I had two modals. The second modal is opened inside the first modal.

So I have to add modale1module in the import of the page and modal2module in the import of modal1module

base page.module

import { AddressModalPageModule } from '../address-modal/address-modal.module';

const routes: Routes = [
  {
    path: '',
    component: CartsPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes),
    ReactiveFormsModule, 
    AddressModalPageModule   

  ],
  declarations: [CartsPage ], 

})
export class CartsPageModule {}

modal1.module

import { AddressModalPage } from './address-modal.page';
import { AddAddressModalPageModule } from '../add-address-modal/add-address-modal.module';


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    AddAddressModalPageModule
  ],
  declarations: [AddressModalPage],
  entryComponents:[AddressModalPage]
})
export class AddressModalPageModule {}

modal2.module

import { AddAddressModalPage } from './add-address-modal.page';
import { AndroidPermissions } from '@ionic-native/android-permissions/ngx';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ReactiveFormsModule
  ],
  declarations: [AddAddressModalPage],
  entryComponents:[AddAddressModalPage],

  providers :[
    AndroidPermissions, ]

})
export class AddAddressModalPageModule {}

回答2:

Ionic 4 supports lazy loading for modals, but as the documentation says with nuance:

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

To lazy load a modal you need to:

import your modal page module into the module of a component from which the modal page will be opened
ensure you added the modal page into entry components list of the modal page module

You should be able to access your singleton provider inside your modal, by just importing it into the modal's page (Angular 8)

for example your modal's module ts looks like this:

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

// import the component for your modal's content:

import { MyModalComponent } from '../my-modal/my-modal.component'


@NgModule({

  // add it to entry components and to the declarations:

  entryComponents: [MyModalComponent],
  declarations: [MyModalComponent],
  imports: [
    CommonModule
  ]
})
export class LazyLoadedModalModule { }

Then importing it into the module of the page that will call the modal would look like this:

...
// import lazy loaded module:

import { LazyLoadedModalModule } from '../lazy-loaded-modal/lazy-loaded-modal.module';


@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    // add it to the imports:
    LazyLoadedModalModule,
    RouterModule.forChild([{ path: '', component: Tab1Page }])
  ],
  declarations: [Tab1Page]
})
export class Tab1PageModule {}

now in the page where you need to create the modal you need to import the component and use modal controller:

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { MyModalComponent } from '../my-modal/my-modal.component'

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {

  constructor(private modalCtrl: ModalController) {}

  async openModal() {
    const modal = await this.modalCtrl.create({
          component: MyModalComponent
    });
    await modal.present();
  }

}

来源：https://stackoverflow.com/questions/59948237/how-to-lazy-load-modals-in-ionic4

标签

ionic-framework

ionic4