在Angular 8中,可以使用模板进行懒加载,在根组件中使用以下代码示例:
HomePageComponent
),该组件将用作根组件的模板。import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: '', component: HomePageComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
标签来显示懒加载的组件。
// lazy.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { LazyComponent } from './lazy.component';
const routes: Routes = [
{ path: '', component: LazyComponent }
];
@NgModule({
declarations: [LazyComponent],
imports: [
CommonModule,
RouterModule.forChild(routes)
]
})
export class LazyModule { }
// lazy.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-lazy',
template: 'Lazy Component
',
})
export class LazyComponent {}
LazyModule
并添加到imports
数组中。// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomePageComponent } from './home-page.component';
import { LazyModule } from './lazy/lazy.module';
@NgModule({
declarations: [
AppComponent,
HomePageComponent
],
imports: [
BrowserModule,
AppRoutingModule,
LazyModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
通过以上步骤,当访问根组件时,它将加载HomePageComponent
作为模板,并且可以通过路由导航懒加载LazyComponent
。