如何在延迟加载的Ionic中使用其他组件？

1 回答

• 1

  Note ：我说错了 .

  ---

  Another note ：如果要使用该组件 in a modal 创建它就像一个延迟加载的新页面并使用它如下：

  let profileModal = this.modalCtrl.create('Profile', { userId: 8675309 });
  profileModal.present();
  

  ---

  因此，如果组件不会在模态中使用，请首先为组件创建一个模块，如下所示：

  // your-component.module.ts
  
  // Angular
  import { NgModule } from '@angular/core';
  
  // Ionic
  import { IonicModule } from 'ionic-angular';
  
  // Component
  import { YourComponent } from '../folder/your-component';
  
  @NgModule({
      imports: [IonicModule],
      declarations: [YourComponent],
      exports: [YourComponent]
  })
  export class YourComponentModule { }
  

  AFAIK，在使用延迟加载时，我们需要导入组件/管道 in every module where it's being used . 一些用户更喜欢将所有组件包含在一个共享模块中，而另一些用户则更喜欢为每个组件创建专用模块 .

  请记住，每个页面的模块都会获得它自己的组件代码副本，所以我认为最好为每个组件创建一个模块，因此每个页面只加载它真正需要正常工作的代码，而不是加载一个更大的模块与以后没有使用的东西 .

  之后，转到页面的模块文件并导入组件的模块，如下所示：

  // Angular
  import { NgModule } from '@angular/core';
  
  // Ionic
  import { IonicPageModule } from 'ionic-angular';
  
  // Components
  import { YourComponentModule } from '../folder/your-component.module';
  
  // Pages
  import { YourPage } from './your-page';
  
  @NgModule({
      declarations: [YourPage],
      imports: [YouComponentModule, IonicPageModule.forChild(YourPage)],
      exports: [YourPage]
  })
  export class YourPageModule { }
  

  回复于 2024-04-27T02:02:50+08:00