如何在ionic4中延迟加载模型

Question

我需要一些帮助，在离子4懒惰加载调制解调器。我谷歌了很多，但找不到确切的解决办法。

我一页上有几个模特儿。我想懒洋洋地装它们。下面是一个页面上两个modals的示例

在我的一个模型中，我需要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 {}

Answer 1

离子型4 支持延迟加载用于调制解调器，但正如文档中所述，它有细微差别：

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

若要延迟加载模态，您需要：

• 将您的模态页模块导入到将从其中打开模态页的组件的模块中。
• 确保将模态页添加到模态页模块的条目组件列表中。

您应该能够访问您的模式内的单例提供程序，只需将它导入到模式的页面(角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();
  }

}

Answer 2

要延迟加载modals，请执行以下步骤

1. 在页面导入中添加模态页面的模块
2. 取消所有的通道，因为我们不需要它
3. 从app.routing.module中删除模态项
4. 在模态模块的entryComponents中添加模态页面

在我的例子中，我有两个模特儿。第二模态在第一模态内打开。

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

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