在Angular 7中,可以使用路由配置和Angular的RouterModule
模块来实现懒加载。下面是一个示例,演示如何在懒加载模块中使用路由配置来避免创建块。
首先,创建一个懒加载模块LazyModule
,并在该模块中定义路由配置。在LazyModule
中,我们将一个或多个组件与路由关联起来。
lazy.module.ts:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { LazyComponent } from './lazy.component';
@NgModule({
declarations: [LazyComponent],
imports: [
CommonModule,
RouterModule.forChild([
{ path: '', component: LazyComponent }
])
]
})
export class LazyModule { }
然后,在主模块中,定义一个路由配置,并使用loadChildren
属性来指定懒加载模块的路径。这样,懒加载模块将在需要时才会被加载。
app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule' }
];
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
RouterModule.forRoot(routes)
],
bootstrap: [AppComponent]
})
export class AppModule { }
在上面的示例中,当访问/lazy
路径时,LazyModule
将被懒加载,并且LazyComponent
将被渲染。
希望这个示例能够帮助你解决懒加载不创建块的问题。