如何在ionic4中延迟加载模态答案

【问题标题】：How to lazy load modals in ionic4如何在ionic4中延迟加载模态
【发布时间】：2020-01-28 23:27:38
【问题描述】：

我需要一些关于在 ionic 4 中延迟加载模态的帮助。我用谷歌搜索了很多，但找不到确切的解决方案。

我在一个页面上有几个模式。我想延迟加载它们。以下是页面上的两个模态的示例

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

为什么会这样？离子模态不能延迟加载吗？

提前谢谢你

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

【问题讨论】：

参考模态延迟加载damirscorner.com/blog/posts/…

标签： ionic-framework ionic4

【解决方案1】：

要延迟加载模态框，请按照以下步骤操作

在页面的导入中添加模态页面的模块
删除所有不需要的modal路由
从 app.routing.module 中移除 modal 的条目
在modal模块的entryComponents中添加modal页面

就我而言，我有两个模态。第二个模态在第一个模态中打开。

所以我必须在页面的导入中添加modale1module，在modal1module的导入中添加modal2module

基本页面.模块

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 用于模态，但正如文档所说的细微差别：

需要注意的是，模态在打开时不会被加载，而是在导入模态的模块的模块被加载时加载

要延迟加载模式，您需要：

将您的模态页面模块导入到组件的模块中将打开模态页面
确保您已将模态页面添加到模态页面模块的入口组件列表中

您应该能够访问您的模态中的单例提供程序，只需将其导入模态页面（Angular 8）

例如，您的模态模块 ts 如下所示：

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

然后将其导入将调用模态的页面模块如下所示：

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

现在在您需要创建模态的页面中，您需要导入组件并使用模态控制器：

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

}

【讨论】：