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

主要模块

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

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

ionic start lazyLoadingBlank blankcd 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 { ... }

下载源码