ionic入门之深链接和延迟加载

主要模块

延迟加载听起来像是一个复杂的过程，但实际上是非常直截了当。从概念上讲，一段代码，随着应用程序请求而加载。NgModules 是可以组织我们的应用程序页，并将它们分开在不同的数据块的方式。

使用空白的面板，起动应用程序。

ionic start lazyLoadingBlank blank
cd lazyLoadingBlank

现在如果我们打开我们的 src/app/app.module.ts文件，我们可以检查默认值 NgModule︰

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

这里，我们可以看到我们要导入的 MyApp组件和 HomePage 组件。现在我们想要实现 HomePage懒加载。所以我们可以删除引用中 declarations和 entryComponents，以及作为 import 语句。

那么 HomePage如何支持懒加载？我们可以提供它自己的 NgModule，将封装组件需要功能的一切。

让我们创建一个新文件出来。 src/pages/home/home.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
@NgModule({
  declarations: [HomePage],
  imports: [IonicPageModule.forChild(HomePage)],
})
export class HomePageModule { }

在让我们在src/pages/home/home.ts 添加@IonicPage

import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';
@IonicPage()//可以指定name，如果不指定那么默认是类名
@Component(... )
export class HomePage { ... }

下载源码