如何在ionic4中延迟加载模态 [英] How to lazy load modals in ionic4

问题描述

我需要在ionic 4中延迟加载模态时需要一些帮助.我在Google上搜索了很多，但找不到确切的解决方案.

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

在我的模态之一中，我需要AndroidPermissions，所以我必须将其导入到页面的模块文件中，因为在模态的模块文件中导入是不起作用的.

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?

提前谢谢

home.module.ts

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 {}

推荐答案

Ionic 4 支持模态的延迟加载，但正如文档所说的那样:

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

通过将其导入模态页面(角度8)，您应该能够访问模态中的单例提供者

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

例如您的模态模块ts看起来像这样:

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();
  }

}

这篇关于如何在ionic4中延迟加载模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！