在Angular 7中,我们可以使用模块和惰性加载来提高应用程序的性能。以下是一个示例,演示如何将应用程序分为模块并进行惰性加载。
首先,我们需要创建一个根模块,并在其中进行路由配置。假设我们有两个模块:Home模块和About模块。
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
const appRoutes: Routes = [
{ path: '', loadChildren: './home/home.module#HomeModule' },
{ path: 'about', loadChildren: './about/about.module#AboutModule' }
];
@NgModule({
imports: [
BrowserModule,
RouterModule.forRoot(appRoutes)
],
declarations: [ ],
bootstrap: [ ],
providers: [ ]
})
export class AppModule { }
// home.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home.component';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: '', component: HomeComponent }
];
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(routes)
],
declarations: [ HomeComponent ],
providers: [ ]
})
export class HomeModule { }
// about.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AboutComponent } from './about.component';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: '', component: AboutComponent }
];
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(routes)
],
declarations: [ AboutComponent ],
providers: [ ]
})
export class AboutModule { }
创建Home组件和About组件的模板和样式。
最后,在根组件的模板中添加路由链接:
现在,当用户导航到首页或关于页面时,Angular将只加载所需的模块,从而提高应用程序的性能。