Ionic 2 延迟加载组件

Question

我的应用程序非常大，有大约 30 个组件和页面，我将它们全部加载到我的 app.module.ts 中，有时应用程序会变慢。我想知道它是否有任何关系。

我的问题：在 Ionic 2 中延迟加载组件和使用 angular 2 功能（更多模块）的正确方法是什么？

Answer 1

从 Ionic 3 开始，您可以延迟加载组件。

只需为每个组件/页面创建一个新模块。

以下是主页模块的外观示例：

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
@NgModule({
  declarations: [MyApp, HomePage],
  imports: [ ... ],
  bootstrap: [IonicApp],
  entryComponents: [MyApp, HomePage],
  providers: [ ... ]
})
export class AppModule {}

创建模块后，将@IonicPage()附加到组件：

import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';
@IonicPage()
@Component(... )
export class HomePage { ... }

现在您可以在不使用import 语句的情况下将您的页面/组件用作字符串：

rootPage:any = 'HomePage';

如需更多描述性答案，请查看Ionic Lazy Loading blog post。