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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

一线分享 2017-05-12 16:13:07 浏览276
展开阅读全文
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/inforstack/article/details/71741941

主要模块

延迟加载听起来像是一个复杂的过程,但实际上是非常直截了当。从概念上讲,一段代码,随着应用程序请求而加载。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懒加载。所以我们可以删除引用中declarationsentryComponents,以及作为 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 { ... }

网友评论

登录后评论
0/500
评论
一线分享
+ 关注